本文已参与「新人创作礼」活动，一起开启掘金创作之路。

styleguiddist

react-styleguidist 会把所有组件都显示在浏览器的一个页面上，包含 props 文档，用法示例以及一个独立开发组件的环境。 Styleguidist 根据组件中的注释，propTypes 声明和Readerme.md为组件生成文档。

开发

安装依赖

# 安装依赖（需要webpack；Create React App创建的项目则不用安装
npm install --save-dev webpack
npm install --save-dev react-styleguidist

不是webpack相关的项目需要安装一下babel

npm install --save-dev babel-loader
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

然后配置babel

//babel.config.js
module.exports = {
  presets: [
    [
      '@babel/env',
      {
        modules: false,
        useBuiltIns: 'usage'
      }
    ],
    '@babel/react'
  ]
}

配置styleguid.config.js

const path = require('path')

const packagePath = path.resolve(
    __dirname,
    'package.json'
)
const packageFile = require(packagePath)


module.exports = {
    webpackConfig: {
        module: {
          rules: [
            {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel-loader'
            },
            {
              test: /\.css$/,
              use: ['style-loader', 'css-loader']
            }
          ]
        }
    },
    components: 'example/components/**/*.{js,jsx,ts,tsx}', // 写入对应目录的文档
    propsParser: require('react-docgen-typescript').withCustomConfig(
        './tsconfig.json'
    ).parse, // 用来支持 tsx
    verbose: true, // 打印详细信息
    updateDocs(docs, file) {
        if (docs.doclets.version) {
            const version = packageFile.version

            docs.doclets.version = version
            docs.tags.version[0].description = version
        }

        return docs
    }, // 在使用 @version 时 使用 package.json 的 version
    version: packageFile.version, // 同上 使用 package.json 的 version
    usageMode: 'expand', // 自动打开文档的缩放
    pagePerSection: true, // 是否每页一个组件显示
    title: "接口文档" // 文档名
}

注意要对于文档目录需要生成文档的组件格式要安装styleguid的要求

styleguide配置属性

全部配置

属性名	类型	含义
title	String	设置网页标题
serverPort	Number	端口号
require	Array	添加用户自定义的js, CSS 或 polyfills
assetsDir	String	资源文件名
styleguideDir	String	定义styleguidist构建命令生成的静态HTML的文件夹；默认值：styleguide
getComponentPathLine	Function	获取组件加载路径
template	Object / Function	更改应用程序的HTML。可以添加favicon，meta 标签, 内嵌JavaScript或CSS的对象。
styles	Object / String / Function	自定义Styleguidist 示例组件的样式；配置的文件路径是相对配置文件或者绝对路径。
theme	Object / String	自定义Styleguidist 示例组件 UI字体，颜色等; 配置的文件路径是相对配置文件或者绝对路径。
sections	Array[{}]	设置组件分组
styleguideComponents	Object	重写被用于渲染到浏览器的styleguide React组件;
webpackConfig	Object / String	自定义webpack配置;

配置package.json启动脚本

"scripts": {
  "styleguide": "NODE_ENV=development styleguidist server",
  "styleguide:build": "NODE_ENV=production styleguidist build",
}

启动及编译

#  Run dev server
styleguidist server 
# Generate a static HTML style guide.
styleguidist build

简单效果：

styleguiddist浅试

styleguiddist

开发

开发

styleguide配置属性

相关链接