什么是 generator-react-modules?
generator-react-modules 是一个基于 yeoman 开发的 npm 包，用于快速初始化一个 React 组件库脚手架。它提供了一个简单易用的命令行工具，可以快速地生成一个 React 组件库的开发脚手架，并且能够自动完成组件库的初始化、打包、测试等基础工作。
如何安装 generator-react-modules
npm install -g yo generator-react-modules
如何使用 generator-react-modules
初始化一个组件库
在项目的根目录下执行以下命令，即可生成一个组件库的初始目录结构：
yo react-modules
执行命令后，generator-react-modules 会自动在当前目录下创建一个名为 react-components 的文件夹，并生成如下文件结构：
-- -------------------- ---- -------
-
--- ---------
--- ------------
--- ---
- --- --------
- --- ----------
--- ----
--- --------
--- ----------其中，src 目录用于存放组件库的源码，test 目录用于存放组件库的测试代码。
创建一个 React 组件
执行以下命令即可在组件库中创建一个新的 React 组件：
yo react-modules:component
执行命令后，会提示输入组件名称，然后自动在 src/components 目录下创建一个以输入名称命名的 React 组件，并生成包含组件结构和样式的代码模板。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ --------- ---- ------------------
------ ------ ---- ----------------
----- -- - -----------------------
------ ------- -------- ------------------ -
----- - --------- - - ------
------ -
---- ----------------------------- ------------
------ ------
------
--
-
--------------------- - -
---------- -----------------
--
------------------------ - -
---------- -----
--组件模板中包含了：
- React 组件的基本框架
- PropTypes 属性定义
- Classnames 用法实例
- 组件样式
启动开发服务器及热更新
执行以下命令，即可启动一个本地开发服务器，并自动打开默认浏览器，实现在浏览器中实时预览你的组件。
npm start
执行命令后，会自动启动一个本地开发服务器，监听 localhost:9000 端口，在浏览器中输入 http://localhost:9000 即可查看该组件库的实时预览。
打包组件库
执行以下命令，即可将组件库打包成一个可发布的 npm 包。
npm pack
执行命令后，会在当前目录下生成一个形如 react-components-1.0.0.tgz 的压缩文件，该文件即为打包后的组件库。
发布组件库
执行以下命令，即可将组件库发布到 npm 仓库。
npm publish
常见问题
如何修改组件库名称和版本号？
打开 package.json 文件，将 name 修改为你期望的组件库名称，将 version 修改为你期望的版本号。
如何添加依赖库？
在项目根目录下执行以下命令，即可添加新的依赖库。
npm install --save [package]
例如：
npm install --save react redux
如何添加测试用例？
在 test/components 目录下添加新的测试用例，然后执行以下命令，即可运行所有的测试用例。
npm test
测试框架使用 jest，具体使用方法请参考官方文档。
结语
以上就是 generator-react-modules 的基本使用方法，它不仅能够帮助我们快速生成一个组件库脚手架，还提供了开箱即用的开发服务器、热更新、打包和测试等功能，让我们专注于组件开发，提高生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551ff81e8991b448cf848