Mooli Docs

Mooli Docs 是一款为组件开发场景而生的文档工具，通过 Mooli Docs 可以快速搭建一套功能完备的 React 组件库。

特性

• 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
• 基于约定的目录结构，自动生成优雅的文档站点和组件示例
• 开箱即用，让所有注意力都放在文档编写和组件开发
• 强大的 Markdown 扩展，可插入自定义 React 组件
• 构建后的组件库默认支持按需引入、主题定制、Tree Shaking

安装

# 通过 npm 安装
npm i mooli-docs -D

# 通过 yarn 安装
yarn add mooli-docs --dev

安装完成后，请将以下配置添加到 package.json 文件中

{
  "scripts": {
    "start": "mooli-docs start",
    "build": "mooli-docs build"
  },
  "prettier": {
    "singleQuote": true,
    "proseWrap": "never",
    "trailingComma": "all"
  },
  "browserslist": ["Android >= 4.0", "iOS >= 8"]
}

命令

Mooli Docs 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。

// package.json
{
  "scripts": {
    "start": "mooli-docs start",
    "build": "mooli-docs build"
  }
}

也可以通过 npm 自带的 npx 直接执行某个命令：

npx mooli-docs start

start

运行本地开发环境。

运行 start 命令时，Mooli Docs 会通过 webpack-dev-server 启动一个本地服务器，用于在开发过程中对文档和示例进行预览。

build

构建静态网站。

运行 build 命令会在 dist 目录下生成可用于生产环境的静态网站代码。

目录结构

源代码目录

基于 Mooli Docs 搭建的组件库的基本目录结构如下所示：

project
├─ documents           # 组件源代码
│   ├─ button          # button 组件源代码
│   └─ dialog          # dialog 组件源代码
│
├─ docs                # 静态文档目录
│   ├─ index.en-US.md  # 文档首页（英文）
│   └─ index.zh-CN.md  # 文档首页（中文）
│
├─ webpack.config.js   # Webpack 配置文件
├─ mooli.config.js     # Mooli Docs 配置文件
├─ pacakge.json
└─ README.md

单个组件的目录如下：

button
├─ style               # 样式文件
│   └─ index.less
├─ index.vue           # 组件源码
├─ index.zh-CN.md      # 组件文档（中文）
└─ index.en-US.md      # 组件文档（英文）

构建结果目录

运行 build 命令会在 dist 目录下生成可用于生产环境的静态网站代码。打包组件可以自定义插件实现或者通过 mooli-tools 进行打包，详见 目录结构。

文档编译打包配置文件

webpack.config.js 是 webpack 的配置文件。其核心是通过 mooli-scripts 构建工具来启动编译文档站点，实现灵活可高度定制化。具体详见 目录结构。

文档站点配置指南

mooli.config.js 是整站的文档站点配置

module.exports = {
  // 组件库名称
  name: 'demo-ui',
  paths: {
    componentDir: 'components', // 组件存放目录
    docsDir: 'docs', // 文档目录
  },
  // 文档站点配置
  site: {
    // 默认语言
    defaultLang: 'zh-CN',
    // 标题
    title: 'Mooli Mobile',
    // logo
    logo: 'https://portrait.gitee.com/uploads/avatars/user/498/1494603_ws18250840411_1619316633.png!avatar200',
    description: 'This Is React Compnents', // 标题下方的描述文案。
    routeClassify: false, // 是否开启路由分类
    hideSimulator: false, // 是否隐藏所有页面右侧的手机模拟器，默认不隐藏
    locales: {
      'zh-CN': {
        langLabel: '中文',
        // 菜单
        links: [
          {
            title: '首页',
            path: 'index',
          }
        ],
        // 左侧导航
        nav: [
          {
            title: '开发指南',
            items: [
              {
                path: 'home',
                title: '介绍',
              },
            ],
          }
        ]
      },
      'en-US': {
        langLabel: 'EN',
        links: [
          {
            title: 'Home',
            path: 'index',
          }
        ],
        .......
      }
    }
  },
};