介绍
generator-arc-component 是一个用于生成标准的 React 组件目录结构的 npm 包。它提供了创建 React 组件所需的基本文件和文件夹，包括主文件、样式文件、测试文件以及基本的打包和发布设置。相对于手动创建组件目录，使用 generator-arc-component 可以使开发者更加专注于组件的实现，提升开发效率。
安装和使用
首先，确保本地环境安装了 Node.js 和 npm。在安装完成后，执行以下命令安装 generator-arc-component。
npm install -g yo generator-arc-component
接着，进入希望创建组件的目录，执行以下命令。
yo arc-component
在执行命令后，会提示开发者输入组件的名称、描述等信息，并生成相应的组件目录。组件目录的结构如下。
├── index.js ├── index.less ├── index.test.js ├── package.json └── README.md
其中，index.js 为组件主文件，index.less 为组件样式文件，index.test.js 为组件测试文件，package.json 为组件的配置文件，README.md 为组件的说明文档。
在生成组件目录后，执行以下命令安装组件需要的依赖。
npm install
完成以上步骤后，就可以开始编写组件的实现内容。在实现完成后，执行以下命令进行打包和发布。
npm run build npm publish
以上命令会将组件打包成一个发布包，并推送到 npm 仓库中，供其他开发者使用。
示例代码
以创建一个简单的按钮组件为例，演示 generator-arc-component 的使用。
- 进入希望创建组件的目录。
cd path/to/components
- 执行
yo arc-component命令创建组件目录。
yo arc-component
- 根据提示输入组件信息，如下所示。
? What is the name of your component? Button ? Please provide a short description for the component: A simple button component ? Would you like to include tests with your component? (Y/n) Y
- 完成组件目录的生成后，进入组件目录。
cd Button
- 安装组件依赖。
npm install
- 打开
index.js，编写组件实现。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ---------------
----- ------ - -- ------ ------- -- -- -
------- ------------------ ------------------
-------
---------
--
---------------- - -
------ -----------------
-------- ---------------
--
------ ------- -------- 打开
index.less，编写组件样式。
-- -------------------- ---- ------- ------- - -------- --- ----- ----------------- -------- ------ ----- -------------- ---- -------- ----- ------- ----- ------- -------- -
- 打开
index.test.js，编写组件测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ ------ ---- ----------
------------------ -- -- -
----------- ----------- -- -- -
----- - --------- - - -------------- ------------ ---- ----
----------------------- ---------------------------
---
----------- ----- ------- -- -- -
----- ------ - ----------
----- - --------- - - -------------- ------------ ---- ---------------- ----
----- ------ - ---------------- ------
------------------------
----------------------------------------
---
---- 执行以下命令进行打包和发布。
npm run build npm publish
完成以上步骤后，就可以在其他项目中使用该按钮组件了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668881e8991b448e2c04