这就是您应该构建和发布现代 React 组件的方式！

React 开发者日复一日地使用着类似的组件代码。但并非所有开发者都能简化 React 组件的构建和发布工作流程。
在讨论构建和发布工作流程之前，我们先来了解一下为什么我们需要它。

在我们讨论构建和发布工作流程之前，先来解释一下为什么我们需要它。

• 原因 1：我们的大多数 React 代码都是可重用的，并且很有可能我们在另一个项目中需要相同的 React 组件。
• 原因 2：为了保持我们所有 React 项目之间的代码统一性。
• 理由三：一个为开源做出贡献的机会。我们可以发布组件，让其他人也能使用它！

你知道 NPM 包是如何构建的。然而，当我们在项目中使用的 React 组件发布时，我们却犹豫不决。

你犹豫的原因

• 构建一个可在 NPM 上发布的新 React 组件需要花费很多精力。
• 您觉得不值得浪费时间在项目中安装和更新已发布的包。
• 您希望将组件放在组件文件夹中，并且当组件代码发生更改时，您希望项目能够“实时重新加载”。

当我还是新手的时候，我曾经发布过这样的 React 组件……

我曾经创建一个新的 Git 存储库。

然后设置所有 babel 和 webpack 内容。

然后我会编写 React 组件代码。

然后我会手动编译它并使用将其发布到 npm npm publish。

为了测试 React 组件，我会使用 手动将组件安装到我的项目目录中npm i -S that-react-component。但是，它没有“实时重新加载”功能……

我必须更新组件存储库中的包并更新项目中的模块。

那流程真是糟透了。我知道它糟透了。所以我停止了 React 组件的开源。我把它们放在我的项目目录中。如果我需要一个组件，我就把组件文件复制粘贴到另一个项目中。就这样一直重复着。直到我了解到……

create-react-library和npm link！

我只是在 GitHub 搜索框中浏览并输入一些奇怪的东西，然后我发现了create-react-library。

这是更好的方法！

步骤 1

因此，每次你知道你正在为正在进行的项目构建一个组件时，想想……

• 如果您可能需要该组件用于其他项目。
• 如果该组件对其他开发人员有用。
• 如果您的组件逻辑和用例不是特别特定于项目。
• 或者为了理智起见，您希望项目文件不那么混乱。

如果您认为上述任何一个理由成立，那么您应该考虑将组件构建为可重用组件，并将其打包为模块。

如果是，则转到步骤 2。

第 2 步

通过终端访问存储所有项目的主文件夹并运行以下命令👇

$ npx create-react-library <COMPONENT_NAME> # then answer few basic prompts
$ cd <COMPONENT_NAME> # enter in that directory

瞧！你已经设置好了 React 组件样板代码。

步骤3

在终端中执行以下操作👇

$ npm i # this will install your component modules
$ cd example && npm i # install CRA modules
$ npm start

运行上述命令将安装 React 组件和 Create React App Example 所需的模块。

步骤4

让我们浏览一下该项目的文件结构。

project
│   README.md
│   package.json
|   ...   
│
└───example
│   │   package.json
│   │   ...
│
└───src
    │   package.json
    │   ...

现在，无论何时您对库src/或示例应用程序进行更改example/src，create-react-app都会实时重新加载您的本地开发服务器，以便您可以实时迭代您的组件！

步骤5

那么，如果您希望组件能够与您正在进行的项目一起工作，而不必在 npm 上更新和发布，该怎么办？

来npm link救援了！

在组件目录的根目录中，运行$ npm link。这将使您的组件可供所有项目全局使用！

步骤6

现在通过终端，到达正在进行的项目目录，然后运行 
$ npm link <COMPONENT_NAME>。

就是这样。你已经连接了两个世界！

让您的组件目录和正在进行的项目实时观察和编译代码。

步骤7

现在是时候在你的项目中使用该组件了！ 
你可以以正常方式导入和使用该组件。

import ThatAwesomeComponent from '<COMPONENT_NAME>'

现在，当您更新组件代码并在浏览器中刷新项目时，您会看到一切变得生动起来！

去吧！你自己试试吧！

发布你的 React 组件

现在您想要发布/部署/运送您的 React 组件……

• 确保您有良好的文档支持您的代码。
• 另外，请检查你的版本号。如果你觉得一切正常且可以运行，就可以发布了！

$ npm publish

就是这样。您的文件将被构建并发布到 NPM Registry！

如果您希望构建不那么臃肿，请使用以下文件发布组件 .npmignore。

# it is also configured for TypeScript Components
src
example
.vscode
.eslintrc
.prettierrc
package-lock.json
tsconfig.json
tsconfig.test.json
.gitignore
node_modules
.travis.yml
rollup.config.js

你忘了一件事！

不要忘记npm unlink从您正在进行的项目目录中删除该组件，以便您可以使用“真实”且“已发布”的组件。当您开发完该组件后，可以再次链接它。

要取消链接，请$ npm unlink <COMPONENT_NAME>从项目目录中执行。

链接

https://github.com/transitive-bullshit/create-react-library
https://codurance.com/2016/12/21/how-to-use-npm-link

结论

如果以正确的方式构建和发布，React 组件会更加出色。

关于我

我是 Kumar Abhirup，一名来自印度的 16 岁 JavaScript React 开发人员，我每天都在学习新事物。

在 Twitter 上与我联系🐦
我的个人网站和作品集🖥️

在下面评论您更好的方法和建议以改进本文。:)