React 是一个非常流行的 JavaScript 库，用于构建用户界面。当我们在开发 React 应用时，我们通常需要编写许多组件来构建我们的应用程序。这些组件可能包含一些通用的功能，例如按钮、表单等。有时，我们希望将这些组件共享给其他开发人员或团队，以便他们可以在自己的项目中重复使用这些组件。在这种情况下，我们可以构建一个可重用的组件库，并将其发布到 npm 上。
本文将介绍如何构建一个可重用的 React 组件库，并将其发布到 npm 上。我们将使用一些流行的工具和库，例如 webpack、Babel、ESLint 等。我们还将介绍如何使用 Storybook 来开发和测试我们的组件。
准备工作
在开始构建组件库之前，我们需要做一些准备工作。首先，我们需要创建一个新的 npm 包，并在其中初始化一个新的 React 应用程序。我们可以使用如下命令来完成这个过程：
----- -------------------- -- -------------------- --- ---- -- --- ------- ----- --------- --- ---------------- -----------
接下来，我们需要安装一些必要的开发依赖项，例如 webpack、Babel、ESLint 等。我们可以使用如下命令来安装这些依赖项：
--- ------- ---------- ------- ----------- ------------------ ------------ ----------- ----------------- ------------------- ------ -------------------- -------------------- ------------------- ---------------------- -------------------------
配置 webpack
接下来，我们需要配置 webpack，以便我们可以打包我们的组件库。我们需要创建一个名为 webpack.config.js 的文件，并将如下代码添加到其中：
----- ---- - ----------------
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
-------------- ------
-------- -----------------------
--------------- -----
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -----------------
--
--
--
-------- -
----------- ------- --------
--
--在上面的配置中，我们指定了入口文件为 src/index.js，输出文件为 dist/index.js。我们使用了 umd 输出格式，并将库名设置为 my-component-library。这将允许我们在不同的环境中使用我们的组件库。
配置 Babel
接下来，我们需要配置 Babel，以便我们可以使用 ES6 和 JSX 语法编写我们的组件。我们需要创建一个名为 .babelrc 的文件，并将如下代码添加到其中：
- ---------- --------------------- ---------------------- -
配置 ESLint
接下来，我们需要配置 ESLint，以便我们可以保持代码的一致性和质量。我们需要创建一个名为 .eslintrc 的文件，并将如下代码添加到其中：
-
---------- ---------- ----------------------- ------------------------- --------------------------- ------------------------------ ----------------------------------
-------- -
------------------------------- --- - ------------- ------- ------- ---
-------------------- --------- -------- - ------- -------- ---
------------------------------------ --------- - ------------------ ---- ---
----------------------------- --------
------------------------------ ------
--
---------- ---------- -------- ----------- --------------
-在上面的配置中，我们使用了 Airbnb 的 ESLint 配置，并添加了一些插件和规则，例如 eslint-plugin-import、eslint-plugin-react、eslint-plugin-jsx-a11y、eslint-plugin-react-hooks 等。这将帮助我们遵循最佳实践和规范。
开发和测试组件
现在，我们已经完成了所有的配置工作。接下来，我们可以开始开发和测试我们的组件了。为了更好地开发和测试组件，我们可以使用 Storybook。
安装 Storybook
我们可以使用如下命令来安装 Storybook：
--- -- ----
这将为我们创建一个名为 .storybook 的文件夹，并在其中添加一些必要的配置和文件。
创建组件
接下来，我们可以开始创建我们的组件了。我们需要在 src 文件夹中创建一个名为 Button.js 的文件，并将如下代码添加到其中：
------ ----- ---- --------
------ --------- ---- -------------
----- ------ - -- --------- ------- -- -- -
------- ------------- ------------------
----------
---------
--
---------------- - -
--------- --------------------------
-------- --------------------------
--
------ ------- -------在上面的代码中，我们创建了一个名为 Button 的组件，并将其导出。该组件接受两个属性：children 和 onClick。children 属性是一个必填属性，并且应该是一个节点。onClick 属性是一个必填属性，并且应该是一个回调函数。
编写 Storybook
接下来，我们需要编写 Storybook，以便我们可以在其中测试我们的组件。我们需要在 .storybook 文件夹中创建一个名为 Button.stories.js 的文件，并将如下代码添加到其中：
------ ----- ---- -------- ------ - ------ - ---- --------------------------- ------ ------ ---- ---------------- ------ ------- - ------ --------- ---------- ------- -- ------ ----- ------- - -- -- ------- ---------------------------------------------
在上面的代码中，我们创建了一个名为 Button 的 Storybook，并将其导出。该 Storybook 包含一个名为 Default 的组件，该组件使用我们之前创建的 Button 组件，并添加了一个名为 clicked 的事件。
运行 Storybook
现在，我们已经完成了所有的开发工作。接下来，我们可以运行 Storybook，以便我们可以在其中测试我们的组件。我们可以使用如下命令来运行 Storybook：
--- --- ---------
这将为我们启动一个本地服务器，并在其中打开 Storybook。
发布组件库
现在，我们已经完成了所有的开发和测试工作。接下来，我们可以将我们的组件库发布到 npm 上。
注册 npm 账号
首先，我们需要注册一个 npm 账号。我们可以使用如下命令来注册一个新的账号：
--- -------
构建组件库
接下来，我们需要构建我们的组件库。我们可以使用如下命令来构建我们的组件库：
--- --- -----
这将为我们打包我们的组件库，并将其输出到 dist 文件夹中。
发布组件库
最后，我们可以使用如下命令来发布我们的组件库：
--- -------
这将为我们发布我们的组件库，并将其添加到 npm 上。
结论
在本文中，我们介绍了如何构建一个可重用的 React 组件库，并将其发布到 npm 上。我们使用了一些流行的工具和库，例如 webpack、Babel、ESLint 等。我们还介绍了如何使用 Storybook 来开发和测试我们的组件。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6739b951317fbffedf185a8f