前端项目如何共享框架代码_如何使用位轻松在项目之间共享代码

前端项目如何共享框架代码

Sharing code between your repositories and projects is critical your our product’s success.

在存储库和项目之间共享代码对我们产品的成功至关重要。

When your team fails to share code, you end up with duplicated code across your codebase — which is bound to slow down the delivery cycles and make maintenance a nightmare, as every change would require long refactoring in multiple places. You also waste valuable time and effort and reinventing the wheel, instead of building new things.

当您的团队无法共享代码时，您最终会在整个代码库中得到重复的代码-这势必会拖延交付周期并使维护成为一场噩梦，因为每次更改都需要在多个地方进行长时间的重构。 您还浪费了宝贵的时间和精力并重新发明了轮子，而不是制造新的东西。

As your team and projects begin to scale, this problem becomes more painful.

随着团队和项目规模的扩大，这个问题变得更加痛苦。

The Javascript ecosystem is working hard to make code sharing simpler, with new technologies like Bit, Lerna and more.

Java生态系统正在努力通过Bit ， Lerna等新技术使代码共享更简单。

Let’s take a quick look at how you can easily share code as a team in both multirepo and monorepo architectures.

让我们快速看一下如何在多仓库和单仓库架构中以团队的方式轻松共享代码。

共享代码的开销 (The Overhead of Sharing Code)

The main barrier to code sharing is overhead.

代码共享的主要障碍是开销。

Let’s say we have a repository, and we want to share part of it as a package. Traditional workflows force you to split your existing repository into two repos, and use one of them to set up and publish the package. Now imagine you have 500 packages you want to share out of 50 repositories.

假设我们有一个存储库，并且希望将其一部分作为一个包共享。 传统的工作流程会迫使您将现有存储库分为两个存储库，并使用其中之一来设置和发布程序包。 现在，假设您要在50个存储库中共享500个软件包。

When you need to make changes to these packages, you would have to make changes in over 500 repositories which is bound to get very messy very quickly, likely just to end up in dependency hell.

当您需要对这些软件包进行更改时，您将不得不在500多个存储库中进行更改，这些存储注定会很快变得非常混乱，很可能最终会陷入依赖地狱。

You can use Lerna to keep those packages in a single repository if you choose to restructure your entire project into a huge monorepo. This can help reduce the overhead of making changes in multiple repos, but will still force you to set up and maintain these packages inside the repo, manually handle their dependency trees and still every change would have to go through the original repo’s context as a source of truth.

如果您选择将整个项目重组为一个庞大的monorepo，则可以使用Lerna将这些程序包保存在单个存储库中。 这可以帮助减少在多个存储库中进行更改的开销，但是仍然会迫使您在存储库中设置和维护这些程序包，手动处理它们的依赖关系树，并且每项更改都必须作为原始源通过原始存储库的上下文。真相。

Regardless of architecture, this type of overhead is often enough to make code sharing all too hard.

无论采用哪种架构，这种类型的开销通常足以使代码共享变得非常困难。

Bit breaks this overhead by letting you easily share, change and use code from any repo or project in a fully controlled and scalable way. Let’s see how.

通过让您轻松地以完全受控和可扩展的方式共享，更改和使用任何存储库或项目中的代码，Bit打破了这些开销。 让我们看看如何。

位：更快，可扩展的代码共享 (Bit: Faster, Scalable Code Sharing)

Bit breaks the overhead of sharing code as we know it, offering the ultimate code sharing experience for every type of codebase architecture.

Bit打破了众所周知的共享代码的开销，为每种类型的代码库体系结构提供了最终的代码共享体验。

Instead of splitting your codebase or forcing you to go monorepo (unless you want to), you can use Bit to share parts of your code directly from any existing repository (as it is) and install them in other projects with npm.

您可以使用Bit直接从任何现有存储库(按原样)共享部分代码，并使用npm将它们安装在其他项目中，而不必拆分代码库或强迫您进行monorepo(除非您愿意)。

You don’t have to restructure your project at all or configure any package environments. Instead, you can simply point Bit to the components of code (sets of files) you want to share, let it define their dependency tree for you, and then share them right into a shared location called a Scope. You can also add build an test envrionemnts and let Bit make sure your components are ready to deploy to production.

您根本不需要重组项目或配置任何程序包环境。 相反，您可以简单地将Bit指向要共享的代码组件(文件集)，让它为您定义它们的依赖关系树，然后将它们直接共享到称为Scope的共享位置。 您还可以添加构建测试环境，并让Bit确保您的组件已准备好部署到生产环境。

From there, your different code components can be installed using npm and Yarn just like any other package. Here’s an example of a React Scope containing this Hero component shared from this app on GitHub — which wasn’t changed at all. I also didn’t have to split it into more repos.

从那里，可以像其他任何软件包一样，使用npm和Yarn安装不同的代码组件。 这是一个React Scope的示例，其中包含从GitHub上的该应用程序共享的Hero组件 ，该组件完全没有更改。 我也不必将其拆分为更多的存储库。

As you can see, the component is now available to my whole team to find and choose based on useful visual information, tests results, live rendering (alpha) and more.

如您所见，该组件现在可供我的整个团队使用，可以根据有用的视觉信息，测试结果，实时渲染(alpha)等进行查找和选择。

Now comes the really cool part.

现在是真正酷的部分。

Let’s say that after installing this component in another project using npm, I want to change it a little. All I have to do is use the bit import command to bring its actual source code into any path in any of my repos, and change the code. Bit will continue to track the code even when sourced in my projects and update changes across my codebase.

假设使用npm在另一个项目中安装了此组件之后，我想对其进行一些更改。 我要做的就是使用bit import命令将其实际源代码带到我的任何存储库中的任何路径中，并更改代码。 即使源于我的项目，Bit仍将继续跟踪代码，并在我的代码库中更新更改。

Then I can also simply share it back to the Scope (or to a new one) and even eject the component back to being a package dependency for my project.

然后，我也可以简单地将其共享回Scope(或共享给新的Scope)，甚至eject组件eject成为我项目的程序包依赖项。

Sharing the code took about 30 seconds and did not force any changes to my codebase. Installing it was simple using npm, without Bit. Changing it was even simpler, right from my consuming project’s context.

共享代码花费了大约30秒，并且没有对我的代码库进行任何更改。 使用npm无需Bit即可轻松安装。 就我的消费项目而言，更改它甚至更加简单。

结论 (Conclusion)

Sharing code between projects is extremely important, but also complicated. With Bit, you can easily share any part of your project and use it in other projects any way you choose. You don’t have to restructure you codebase, make messy changes in multiple repos or boilerplate packages.

在项目之间共享代码非常重要，但也很复杂。 使用Bit ，您可以轻松共享项目的任何部分，并以任何选择的方式在其他项目中使用它。 您不必重组代码库，也不必在多个存储库或样板包中进行混乱的更改。

It’s an open-source project, so feel free to get started, suggest feedback, and learn more!

这是一个开源项目 ，请随时开始，提出反馈和了解更多信息！

翻译自: https://www.sitepoint.com/managing-code-components-bit/

前端项目如何共享框架代码