generator-zp-react-shared 是一个基于 Yeoman 的脚手架工具，用于快速生成 React 组件库，提供了一套完整的工程化配置，帮助我们快速搭建和发布组件库。在本文中，我们将详细介绍如何使用这个工具。
安装
首先，我们需要安装 Yeoman 工具：
npm i -g yo
然后，我们可以通过 npm 安装 generator-zp-react-shared：
npm i -g generator-zp-react-shared
使用
使用 generator-zp-react-shared 需要遵循以下步骤：
初始化项目
生成项目的最简单方式是使用 Yeoman 的生成器，执行以下命令来运行生成器：
yo zp-react-shared
在执行命令时，你需要回答一些问题来确定项目的类型和配置。完成后，你将获得如下所示的文件夹结构：
-- -------------------- ---- ------- - --- ----- - ---- - --- ------------ - ---- - --- -------- - ---- - --- --------- - ---- - --- ---- - ---- --- ------ - -------- --- ------ - ------ --- ------ - ---- --- ------------ - --- ---- --- --------- - ------
编写组件
在 /src/components/ 目录下，可以编写我们的组件代码。在这里，我们可以使用 react 或者 react-native 代码，按照指定的规范编写 React 组件。这里为了演示，我们假设我们有一个叫做 Test 的组件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ---- - -- ------- -- -- -
------ -
-----
---------
------
--
--
-------------- - -
-------- ----------------
--
------ ------- -----编写样式
在 /src/styles/ 目录下，可以编写我们的样式代码。这个目录下的样式文件，将被引入到组件中，可以是 css 或者 less/sass 等预处理器。
编译打包
编辑好代码后，我们需要对组件库进行编译打包，生成 umd、esm 等适合不同环境的代码。
执行以下命令即可：
npm run build
然后，你将会获得打包后的代码，被存放到 /dist/ 目录下。
发布组件库
最后，你需要将编译好的组件库进行发布。我们可以通过 npm 或者 yarn 来发布组件库。
在发布前，我们可以先修改 package.json 中的 name、version、description 等字段。然后执行以下命令即可：
npm publish
至此，我们的组件库就成功发布到 npm 仓库上了。
总结
使用 generator-zp-react-shared，可以帮助我们更快速地搭建和发布组件库。它具有完整的工程化配置和丰富的功能，可以让我们专注于编写组件本身。希望本文对大家有所帮助，也希望大家在使用过程中，能够更好地把握 React 以及组件库的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586181e8991b448d597e