什么是 @wertarbyte/mui-styleguidist-wrapper
@wertarbyte/mui-styleguidist-wrapper 是一款基于 Material-UI 的组件库的文档生成工具。它能够自动生成组件文档，并提供示例代码，方便开发人员快速开发和使用组件。
使用它，我们可以轻松地将组件库文档化，并在开发过程中迅速查找文档。
安装
要安装 @wertarbyte/mui-styleguidist-wrapper，我们需要先安装 Node.js 和 npm。安装好之后，可以通过以下命令来安装：
npm install --save-dev @wertarbyte/mui-styleguidist-wrapper
配置
安装好后，我们需要在项目中添加配置文件。在项目的根目录下，创建一个名为 styleguide.config.js 的文件，并加入以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----------- --------------------------------------
------- ----------------------------- -----------------------------
----------------------------- -----
------------ -----------------------------------------
----------------------------
--------
-------------- ------------------------------------------
--------------------------------------------- ---- -
---------------------------------
----- ---------------------
------- --------------------------------
-------- -
-------- -
---------------------------------------
------------------------------------
--
-------- -
----------------------------------------------------------
-
--
---
------ --------------
--
--在这个配置文件中，我们指定了要文档化的组件的路径，指定了要忽略的文件，设置了 props 解析器，以及设置了 webpack 的配置选项。
使用
配置好之后，我们就可以使用 @wertarbyte/mui-styleguidist-wrapper 来生成文档了。在命令行中，输入以下命令即可启动文档服务器：
npx styleguidist server
默认情况下，会在 http://localhost:6060 上启动文档服务器。在浏览器中打开该地址，即可查看文档。
示例
下面是一个使用 @wertarbyte/mui-styleguidist-wrapper 生成文档的示例代码：
-- -------------------- ---- -------
-- -----------
------ ----- ---- --------
------ --------- ---- -------------
------ ------ ---- ---------------------------
---
- - ------ ------ ----------
--
-------- ---------- ------ ------- -- -
------ -
------- ------------------- ------------- ----------
----- --
---------
--
-
------------------ - -
---
- --- ---------- ----- -- --- -------
--
------ --------------------------- --------------
--
--------------------- - -
------ ----------
--
------ ------- ---------保存该文件后，我们可以在文档中使用它，生成文档。
-- -------------------- ---- -------
-- --------------------
-------------- - -
----------- --------------------------------------
------- ----------------------------- -----------------------------
----------------------------- -----
------------ -----------------------------------------
----------------------------
--------
-------------- ------------------------------------------
--------------------------------------------- ---- -
---------------------------------
----- ---------------------
------- --------------------------------
-------- -
-------- -
---------------------------------------
------------------------------------
--
-------- -
----------------------------------------------------------
-
--
---
------ --------------
--
--依次执行以下命令：
npm init npm install --save @material-ui/core npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server react@16 react-dom@16 react-docgen@5 @wertarbyte/mui-styleguidist-wrapper --save-dev npx styleguidist server
在浏览器中打开 http://localhost:6060，即可看到文档化后的组件库。
总结
@wertarbyte/mui-styleguidist-wrapper 是一款简单易用的组件文档生成工具，可以帮助我们快速文档化组件库。在使用时，只需要简单的配置一下，就可以生成漂亮的文档，非常适合前端开发人员使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dabd4