简介
rsg-cli 是一个前端的命令行工具，可帮助我们快速创建 React 组件开发的模板。它基于 react-styleguidist 这个UI组件库的 Webpack 配置模板，以及一些关于自定义webpack配置具体的思路。
安装
使用 npm 命令即可完成 rsg-cli 的安装：
npm install -g rsg-cli
快速入门
在我们开始使用 rsg-cli 之前，首先需要明确一些概念。
rsg-cli 的使用需要满足如下两个条件：
- 项目的根目录下必须含有
rsg.config.js配置文件 - 在
rsg.config.js中，需要使用module.exports导出一个组件的配置对象来运行 rsg-cli
按照以上要求，新建一个 rsg.config.js 配置文件：
module.exports = {
components: 'src/components/**/[A-Z]*.js',
defaultExample: true,
};其中 components 字段是必须要配置的，它是通过匹配路径名字来生成文档页面的组件列表。为了让 rsg-cli 能够感知项目内组件的位置，我们可以在 package.json 文件的 scripts 字段中新建一个启动命令：
"scripts": {
"rsg": "rsg --config rsg.config.js",
}运行命令后，rsg-cli 将自动编译项目内组件，并自动打开文档页面。这些页面是可定制的，可以对文档开发的页面样式、布局和交互还有自定义编译规则做深度定制。
自定义配置
rsg-cli 的配置文件 rsg.config.js 是一个非常强大的功能。此配置文件定义了 rsg-cli 的所有行为和功能。
在配置文件中，可以配置的选项有以下几种：
components: 组件的路径（支持 glob），用空格隔开。必须是在组件源代码目录下，与“组件目录名称/组件目录”之间没有任何字符的模式匹配模式，可以简单地认为这是组件列表的源数据。可以附加一些描述，如<YourPathToComponents>/**/*.{js,jsx,ts,tsx}。这是一个必填选项。ignore: 编译时忽略的文件或文件夹名称。propsParser: 属性解析器用于解析传递给组件的propTypes，以便在文档中生成方便的代码样例列表和API概述。skipComponentsWithoutExample: 跳过没有example属性的组件。moduleAliases: 别名，与 Webpack 的外部属性类似。可以指定的别名有键和值。webpackConfig: 配置用于Webpack的其他选项，由于React Styleguidist基于Webpack开发，因此您可以访问所有Webpack功能。require: 将WebPack上下文中的相对路径解析为绝对路径。与webpack.config.js中的解析选项相同。path.resolve的别名。getComponentPathLine: 函数来自描述URL，它将在“使用”中替换组件标题。pagePerSection: Boolean，是否要按部分创建一个新页面。section: 根据部分或用于将组件映射到路线，用于向文档添加其他内容的组件。skipComponentsWithoutExample: 是否跳过没有示例的组件。title: 应将其添加到文档的标题。serverHost: 提供服务器的主机。serverPort: 提供服务的端口。
示例代码
在此给出一份示例代码：
-- -------------------- ---- -------
-------------- - -
----------- --------------------------
----------
-
----- ------------
----------- -----------------------------
---------- ---------
------------ ----------
--
-
----- ---------
----------- ------------------------------------------- ----------- -
------ -------------------------- --- -- -- ------------------------- --- --
---
---------- ---------
------------ --------
--
-
----- ---------
----------- ---------------------------
---------- ---------
------------ ----------
--
-
----- ---------
----------- --------------------------------
---------- ---------
------------ ----------
-
--
-------- -------------------------------
--代码说明：
以上配置示例采用了多个部分，按类别对组件进行分类。每个部分具有名称和组件列表，它们表示在此部分中发现的组件（src/ components / *）。此外，该示例还在rsg.config中使用了“require”选项来添加CSS样式表。（即‘docz-mufti.responsive.css’）在这里，您可以动态添加CSS文件或JavaScript文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cdc81e8991b448e68b3