1. 介绍
在前端开发中，我们经常需要封装一些可复用的组件，以便在不同的项目中使用。而 npm 是目前最流行的 JavaScript 包管理器，因此我们可以将自己编写的 React 组件打包成 npm 包，方便其他人使用。
在创建 React 组件的过程中，绝大多数的代码都是相同的，比如组件的结构、样式、生命周期方法等。为了方便开发者快速创建符合规范的 React 组件，create-react-npm-component 就应运而生。
create-react-npm-component 是一个 npm 包，它提供了一套标准的 React 组件开发模板，包括组件的结构、样式等，并且支持自定义组件的名称、描述、作者等信息。它可以帮助开发者快速创建符合规范的 React 组件，并且可以直接发布到 npm 上面。
2. 安装
在使用 create-react-npm-component 之前，需要先安装它。可以使用 npm 命令进行全局安装：
npm install -g create-react-npm-component
3. 使用
3.1 初始化项目
在命令行中运行以下命令，可以快速创建一个符合规范的 React 组件项目：
create-react-npm-component my-component
其中，“my-component”是你要创建的组件的名称。执行该命令后，create-react-npm-component 会在当前目录下创建一个名为 my-component 的目录，并且在该目录中创建了一个默认的 React 组件模板。如下图所示：
3.2 修改组件信息
默认创建的 React 组件模板是一个不带样式的空白组件。我们需要修改组件的信息，让它符合实际的需求。在 my-component 目录下，打开 package.json 文件，可以看到如下信息：
-- -------------------- ---- -------
-
------- ---------------
---------- --------
-------------- ---
------- ----------------------
---------- -
-------- -------- -------- -------------------
-------- -------- ------- -------- -------------------
------- ----- -------- -- ---- ----------- -- ---- --
--
--------- ---
---------- ------
------------------- -
-------- ---------
-
-其中，name、version、description、author 和 license 是你要修改的信息。修改完毕后，保存文件。该文件类似于一个 npm 包的 package.json 文件。除了上述信息外，还可以修改 dependencies 和 peerDependencies 等信息。
3.3 开发组件
在 my-component/src 目录下，可以看到如下文件：
- index.js：组件代码入口；
- MyComponent.js：默认的空白组件；
- MyComponent.test.js：测试代码。
我们可以在 MyComponent.js 文件中编写组件的代码，在 index.js 文件中导出该组件，在 MyComponent.test.js 文件中编写测试代码。
3.4 编译组件
在编辑完组件代码之后，需要将代码编译成可用的 js 文件放在 lib 目录下。可以使用以下命令进行编译：
npm run build
执行该命令后，webpack 会自动将 src 目录下的代码打包成一个 js 文件，并且放在 lib 目录下。my-component 目录的目录结构如下：
-- -------------------- ---- ------- --- ---- - --- --------------- - --- ------------------- --- ---- - --- -------------- - --- -------- - --- ------------------- --- ------------ --- --------- --- -----------------
3.5 发布组件
在编译完成后，我们可以使用 npm 命令将组件发布到 npm 上面：
npm publish
4. 示例代码
以下是一个简单的示例代码，实现了一个简单的计数器组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - - ------ - --
-------------------- - --------------------------------
--------------------- - ---------------------------------
-
----------------- -
------------------- -- -- ------ ----------- - - ----
-
------------------ -
------------------- -- -- ------ ----------- - - ----
-
-------- -
------ -
-----
---------- -----------------------
------- -----------------------------------------
------- ------------------------------------------
------
--
-
-
------ ------- --------组件代码非常简单，只有一个计数器，可以通过点击按钮来加减计数。
5. 总结
create-react-npm-component 提供了一种快速创建符合规范的 React 组件的方式，它包括组件的结构、样式等，并且支持自定义组件的名称、描述、作者等信息。使用 create-react-npm-component，你可以快速创建一个符合规范的 React 组件，并将它发布到 npm 上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bf181e8991b448eba93