如何构建模块化 React 组件库

这篇文章已经过时了。

要了解如何使用 Bit Harmony 构建 React 组件库，请参见：

构建 React 组件库 — 正确方法 | 作者：Eden Ella | 点点滴滴

伊甸园艾拉·2023年5月11日・

中等的

模块化库或“组件集”支持独立添加新组件。这意味着，每当您构建一个新的 UI 组件（值得共享）时，只需将其推送到共享组件集即可。这也意味着每个共享组件都单独进行版本控制。您无需为了一点小改动而更新整个库。

这是获得传统组件库的所有好处（可重用性、UI 一致性等）的好方法，而无需通常涉及的大量开销（设置 repo、配置打包、设置文档工具等）。

最重要的是，它是一种从任何存储库或代码库共享、使用和协作单个组件的方法。

项目

转一下这个：

对此：

1. 创建组件集合

集合是托管在bit.dev上并在 Bit 注册表中注册的独立组件的范围。它与传统的库截然不同，因为它仅用于组织和管理组件集。与传统库不同，集合并非具有单一版本控制的单体对象。

将组件共享到集合的第一步是 - 创建集合😏

为此，请转到bit.dev并创建您的帐户和一个名为（为了我们的目的）“react-demo-app”的新集合。

2. 安装 Bit 并初始化工作区

如果您想继续，请克隆并安装此演示待办事项应用程序：

$ git clone https://github.com/teambit/react-demo-app.git
$ cd react-demo-app
$ yarn

在您的机器上全局安装 Bit CLI：

$ yarn global add bit-bin

登录您的帐户：

$  bit login

要开始使用 Bit 处理此项目 - 初始化 Bit 工作区：

$ bit init --package-manager yarn

3. 跟踪应用程序的组件

跟踪应用程序的所有组件（位于“组件”库中）：

$ bit add src/components/*

最好通过输入以下内容来确保不存在任何依赖问题：

$ bit status

在这种情况下，您应该看到以下消息：

new components
(use "bit tag --all [version]" to lock a version with all your changes)

> button ... ok
     > h1 ... ok
     > list ... ok
     > removable-list-item ... ok
     > text-input ... ok
     > to-do-list ... ok

如果任何组件存在依赖关系图问题，请单击此处了解如何解决这些问题。

4.配置编译器

为共享组件配置编译器，让您可以自由地在任何地方使用、构建和测试它们。您可以为 Bit 构建自己的编译器，也可以使用 Bit 预制的编译器之一：

$ bit import bit.envs/compilers/react --compiler

您应该看到：

the following component environments were installed
- bit.envs/compilers/react@1.0.5

5. 标记（阶段）组件

标记组件时，Bit 会运行与其相关的所有测试，对其进行编译并锁定版本。

就我而言，我想标记所有添加的组件：

$ bit tag --all 1.0.0

6. 导出组件

一旦组件被标记，它们就可以被导出到共享集合（在本例中，集合名称为“react-demo-app”）：

$ bit export <username>.react-demo-app

如果您继续操作，您的组件应该可以在bit.dev中的“react-demo-app”集合中使用。

前往https://bit.dev/user-name/react-demo-app （或访问我的https://bit.dev/learn-bit/react-demo-app/探索我的合集），在 Bit 的 Playground 中实时查看它们的渲染效果。使用 Playground 添​​加示例，展示每个组件的使用方法。

需要注意的是，如果您不向组件提供有效示例，则您的组件将不会在 Bit 的游乐场中呈现（因此，例如，如果我的“列表”组件没有收到其所需的 prop，即项目数组，它将不会呈现）。

我还添加了一个 CSS 文件（到示例中）来导入我打算与我的组件一起使用的字体系列。

7. 将单个组件导入新项目

使用 create-react-app 创建一个新的 React 项目并将其命名为“new-app”。

$ npx create-react-app new-app

假设您的项目需要一个可移动列表项组件。

您可以使用 NPM 或 Yarn 以其构建形式安装它，就像任何其他包一样：

$ yarn add @bit/user-name.react-demo-app.removable-list-item

或者，您可能想导入其源代码并进行修改。首先，您需要初始化一个新的 Bit 工作区：

$ cd new-app
$ bit init

然后，从您的集合中导入可移除列表项组件。

$ bit import user-name.react-demo-app/removable-list-item

例如：

$ bit import bit.react-demo-app/removable-list-item

完成后，应该会出现以下消息：

successfully imported one component
- added bit.react-demo-app/removable-list-item new versions: 1.0.0, currently used version 1.0.0

导入的组件现在位于新创建的组件库下（位于项目的根文件夹中 - 而不是其 src 文件夹中）。

├───.git
├───components
│   ├───removable-list-item

8. 修改组件并将其导出回来

打开可移除列表项目录内的源代码并进行小幅更改，然后将其导出为新版本。

例如，让我们为每个可移动列表项的外观添加动画。

修改之前可移除列表项的样子如下：

修改后是这样的：

可移除列表项组件现在是一个导入组件。这意味着它已被 Bit 跟踪和处理（并且其编译器已配置）。

让我们标记一下（再次强调，为了方便起见，我将使用“全部”标志）：

我可以使用组件

$ bit tag --all

并将其推（导出）回共享集合：

$ bit export user-name.react-demo-app

您应该会收到一条消息，内容如下：

exported 1 components to scope username.react-demo-app

修改后的组件现在可以在 react-demo-app 集合中使用了😎