我们几乎都遇到过这样的情况：我们需要在一个应用和另一个应用之间共享一个组件。通常我们只是决定复制和粘贴，因为这确实是最快的选择。
有时这甚至是可以的，特别是当涉及到那些较小的组件时。但如果你想共享一个大的、更复杂的组件呢？以一个预订引擎为例。
来自booking.com的预订引擎
你可能有2个应用程序可以预订酒店，因此需要这个组件。你现在有几个选择。复制和粘贴当然可以，但你在其中做的任何改变，你现在必须重复这项工作，再做一次，让我们面对它，我们都讨厌做重复的工作。
我们的时间比这更有价值。因此，下一个选择是把它打包并发送给npm。这并不是一个坏的选择。两个应用程序都可以安装这个包并使用它，而且你只需要修改一次。游戏结束了，快乐的日子。
那么，这个选项的问题是什么呢？预订引擎组件是由几个小组件组成的，如搜索输入、日历、按钮、输入框等等。这些小组件现在被紧紧地耦合到这一个大组件上。
如果我们在设计系统中改变任何东西，给我们整个网站的输入组件一个新的外观和感觉，那么我们也需要更新预订引擎。又是重复性的工作。但不仅仅是这样，我们还必须记住这样做，因为这是一个非常手动的过程。现在，如果我们有一个联系表，我们也在应用程序之间共享。
我们也将不得不手动更新它。我们可以告诉设计师不要做任何改变，这对我们来说当然是一个很好的解决方案。但说真的，所有这些更新、发布新的软件包和管理所有这些都是不容易的，而且一点也不好玩。
好吧，总是有另一个解决方案。我们可以把所有的东西都移到一个monorepo中，一个repo可以容纳几个应用程序，然后我们只需要修改一次代码，因为所有的表单元素都可以在本地导入到更复杂的组件中。这是一个很好的解决方案，而且效果会很好。
现在，当你的公司规模扩大，突然你现在有12个刚刚创建的其他品牌需要使用这个预订引擎时，会发生什么？你可能在想，是的，这可能永远不会发生。这也是我的想法，直到我真的处于这种情况，不得不提供一个解决方案。
现在，我的monorepo里面有13个应用程序，构建时间是通过屋顶的，每一个在任何项目上工作的开发人员都在共享同一个repo。现在，这可能是一件好事，有些人喜欢它，但它也可能是一场恶梦。
照片：Jan Antonin KolaronUnsplash
我们可以使用像NX这样的工具，它不会在每次评论时都重建所有东西，它只重建必要的东西，所以这将有助于构建时间。或者我们可以使用Learna，它将优化管理多包仓库的工作流程，尽管我们必须为每个包管理一个package.json。
一定会有一个更好的解决方案。我们所希望的是能够在我们所有的应用程序中共享我们的预订引擎组件。我们希望它能消耗更小的组件，这些组件应该独立于我们的预订引擎。我们希望能够在我们的网站上更新我们的组件，它们也将在我们的预订引擎中更新。
我们不希望做重复性的工作，但我们希望保持一切同步。我们希望能够独立于其他团队和品牌使用这些组件。我们的要求真的太高了吗？
Bit是一个免费的、分布式的组件和依赖关系的版本控制系统。它有助于以一种简单和可扩展的方式构建组件驱动的应用程序。我们可以将我们的组件作为单独的构建块来管理，这些构建块是在隔离的情况下创建和测试的。
然后，这些组件可以很容易地被版本化和导出，因此它们可以在任何使用npm或yarn的应用程序中使用。Bit负责所有的版本管理过程，所以你不必去做。作为一个开发者，你只想构建代码，而不必担心你不想担心的事情。
在Bit中由可重复使用的组件组成的岸上商店应用程序
在上面的鞋店例子中，在Bit工作空间中构建的，你可以看到这个应用程序不包含任何较小的组件，但它使用它们来构建更复杂的组件。这些较小的组件，如按钮、标题、样式、实体类型和模拟数据，实际上是用来创建这个应用程序以及其他许多应用程序。就像我们对预订引擎的要求一样。
好吧，似乎是一个很好的解决方案。但你可能会问，这不就是把你的所有组件作为单独的npm包加入吗？其实不是的。Bit不仅为你处理组件的版本问题，而且还处理依赖性管理问题。
这意味着，如果我对我的输入或按钮组件做了改变，Bit知道哪些组件是由这些小组件组成的。在我们的例子中，它是预订引擎和联系表单。然后Bit会用更新的输入或按钮组件创建这些组件的新版本。这意味着我们甚至不需要考虑或记住哪些组件依赖于其他组件。
Bit中的依赖关系图显示哪些组件依赖哪些组件
有了Bit，我们可以孤立地构建我们的组件，我们可以孤立地测试我们的组件。我们可以由更小的组件组成组件。我们可以发布这些组件的版本，然后在我们所有的应用程序中使用这些组件。
我们可以对组件进行修改，并知道Bit将负责更新使用已修改组件的任何组件。这意味着我们可以专注于构建很酷的东西。
在Bit中组成一个鞋卡组件
那么，有什么问题吗？嗯，你必须开始用组件驱动开发的思维来构建。这意味着要孤立地构建组件，而不是构建紧密耦合在一起的组件。
这意味着构建与其他组件没有相对联系的组件。幸运的是，Bit可以帮助你做到这一点，因为它不允许相对导入，因此你可以用导入链接来构建你的组件，就像你已经链接到了node modules文件夹中的一个包一样，因为你就是在做这个。
Bit给了你一个工作空间，所以你可以在隔离的情况下构建和测试组件，有自己的开发服务器和热模块替换。每个组件都有自己的文档、组合和测试文件。
Bit是100%开源的，所以它是免费使用的。你可以自己托管你的组件或利用Bit的云服务。选择权在你。
那么，这一切是如何运作的呢？我创建了一个教程，介绍如何在比特中启动和运行一个组件，在另一个组件中消耗它，将其版本和导出，然后用Yarn将其安装在Create React App中。别担心，这根本不需要很长时间，因为我们已经建立了生成器工具来让你快速安装。
你可以生成一个基本的组件，这样你就可以测试一下使用Bit工作和构建是什么样子的，然后再担心使你的组件更加有用和真实。
如果你不喜欢阅读，那么你可以看视频，然后用代码代替。
虽然我们是一个以TypeScript为首的平台，但如果TypeScript仍然让你感到害怕，或者你只是不想使用它，那么只要选择组件的JavaScript版本，你就可以不用TypeScript来工作。当然，如果你不是一个前端开发者，但仍然想尝试一下Bit，那么请随意创建Node.js组件来代替。
实际上，Bit的默认环境是Node.js。
如果你对Bit有任何疑惑或问题，我很乐意回答，所以只要在twitter上联系，或者更好的是加入我们的slack频道，在那里问任何技术问题或只是打个招呼。记住Bit是开源的，所以欢迎合作。提交一个问题，或者说是一个问题;)玩得开心，我期待着看到你用Bit构建的很酷的东西。
了解更多
在多个应用程序中共享React组件最初发表在Medium上的Bits and Pieces，人们通过强调和回应这个故事来继续对话。
