JavaScript 如何使用 Bit 在应用程序之间共享 React 组件

这是组件的时代。为 UI 组件构建的框架（例如 React）使我们能够将 UI 分成单独的、可重用的部分，这些部分可以单独开发和使用。 Play Next Unmute Current Time 0:05 / Duration 2:00 Fullscreen Backward Skip 10s Play Video Forward Skip 10s 因此，React 组件通常可以在多个项目和应用程序中进行调整和重用。 我们可以通过在项目之间共享它们来从它们的模块化和可重用性中受益，而不是重复它们或重新发明轮子。 使用 Bit 在项目之间共享代码 Bit是一个开源项目，它与 Git 和 npm 配合使用，可以加快代码共享速度，并降低必须拆分代码库和更改多个包的开销。相反，您可以轻松共享任何现有存储库的部分，在其他项目中使用它们，并轻松同步它们之间的更改。 让我们看看如何。 示例：为什么共享组件会很困难 让我们看看这个 React 应用程序。 正如您所看到的，它的src/components目录中包含八个可重用的组件。



其中一些还使用全局样式，这可能也可以在其他应用程序中使用。 现在，假设我想在不同的应用程序中使用这些组件之一。 在使用 Bit 之前，我的主要选择是拆分此存储库，创建一个新存储库，添加所需的所有配置（包括构建和测试环境）并发布一个包。我必须这样做 WhatsApp 号码数据 八次，同时还要在它们之间复制代码。我最终需要维护九个存储库，并且我必须在它们之间进行更改。 我也可以使用 Lerna，但它会迫使我将项目的代码库重构为 monorepo，即使如此，我仍然需要手动定义和维护应用程序中所有这些包的设置和依赖关系树。最重要的是，所有这些软件包的可发现性也很差，使其更难以采用。 面对这种开销，大多数人很可能最终会复制粘贴代码，这是非常糟糕的。 与 Bit 共享 React 组件 Bit是共享 React 组件的最快方式，且开销几乎为零。 Bit 无需将您的代码库拆分为更多存储库，而是让您可以轻松共享任何现有存储库中的组件，并通过 npm 在其他存储库和项目中使用它们。



Bit 背后的想法是将您共享的代码的表示与项目的文件系统解耦。 因此，您只需将 Bit 指向您想要共享的组件并将其从项目中导出，而无需实际更改其结构或源代码。 共享后，您的组件将可以使用您最喜欢的包管理器进行安装。 Bit 的另一个优点是它可以跟踪在多个存储库中找到的实际源代码，以便您还可以使用它轻松导入组件的代码并从任何其他项目更改它 - 并让 Bit 为您同步更改。 通过将组件的表示与实际文件结构解耦，Bit 跟踪源代码中的组件，并使我们能够快速将任何文件或文件子集转换为可重用组件。使用简单的 glob 模式（见下文），可以立即共享整个库或项目中的组件，而无需更改源代码本身或文件结构。 任何组件都可以在任何应用程序或项目中单独共享、发现和使用。它还可以从任何项目环境进行修改和更新，选择是否以及如何让我们的朋友从他们自己的项目中更新我们的组件（反之亦然）。