介绍
generator-react-app-components 是一个基于 Yeoman 的 npm 包，用于自动生成一个 React 组件库的基础项目结构、配置文件以及示例组件。该项目结构已经包含了大量常用配置和工具，可以快速开发高质量、可维护的 React 组件库。
下载安装
在命令行中使用以下命令安装 generator-react-app-components 包：
npm install -g yo generator-react-app-components
创建组件库项目
在命令行中执行以下命令来创建一个新的项目：
yo react-app-components
然后你会看到一个交互式命令行，引导你完成组件库项目的创建，其中会询问你一些问题，例如组件库项目名称、github 仓库等信息。这一过程类似于 create-react-app 创建 React 项目的流程。
项目结构
执行上文命令后，将会创建一个项目文件夹，该文件夹结构如下：
-- -------------------- ---- ------- ------------- --- ------------- --- ---- --- --- ----------- - - --- ------- --- --- --- --- --------- --- --- --- --- -------------- --- --- --- --- -------------- --- --- --- --- ---------- --- - - --- -------- - - --- --- --- --- -------- --- --- --------- --- -------- --- -------------- --- ---------- --- -------------- --- ------------ --- --------- --- -----------------
其中：
node_modules/文件夹为项目依赖的插件存放目录。src/文件夹存放组件库的源代码。components/文件夹为组件库中的组件文件存放目录。index.js文件为组件库的入口文件。index.css文件为组件库的样式文件。
.babelrc文件为 Babel 的配置文件。.eslintrc.json文件为 ESLint 的配置文件。.gitignore文件为 Git 的忽略文件，用于标明哪些文件或目录不纳入版本控制。.prettierrc.js文件为 Prettier 的配置文件。package.json文件为项目的配置文件。README.md文件为项目的说明文件。webpack.config.js文件为 Webpack 的配置文件。
开发流程
开发
组件库的开发过程和普通的 React 项目开发过程相同，只是组件库的开发主要关注组件的编写和输出。在 components/ 目录下编写自己的组件，遵循 React 组件的规范即可。
构建
执行以下命令，对组件库项目进行打包构建：
npm run build
执行后，组件库将被打包为一个 UMD 模块。
测试和代码规范检查
执行以下命令，运行测试用例：
npm test
执行以下命令，进行代码规范检查：
npm run lint -- --fix
发布
在项目根目录执行以下命令，发布组件库到 npmjs：
npm publish
示例代码
以 Button 组件为例，components/Button 目录下的文件结构如下：
Button/ ├── Button.js // 组件主体实现 ├── Button.spec.js // 组件自动化测试用例 ├── index.js // 组件导出入口 └── Button.css // 组件样式文件（可选）
其中，Button.js 文件内容如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------- -
------ -
-------
------------------
--------
---------------- ------------
--
-----------------------
-
----------------
---------
--
-Button.spec.js 文件内容如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ---------- ------ - ---- -------------------------
------ ------ ---- -----------
----------------- ---- -- -- -
----------- -------- ---- ------ ---- -- -- -
----- ---------- - ------ -----
--------------------------------------
---------------------------------------------------------
---
----------- ----- -------- -- -- -
----- ----------- - ----------
-------------- --------------------------- --------------
--------------------------------------- -------
---------------------------------------------
---
---index.js 文件内容如下：
import Button from './Button'; export default Button;
总结
本文介绍了创建一个 React 组件库的基础项目结构、配置文件以及示例代码的 generator-react-app-components npm 包，并讲解了项目的开发流程。使用这个 npm 包能够快速启动一个高质量、可维护的 React 组件库项目，并有助于快速开发和发布自己的组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc981e8991b448dd4d4