Needlessly Provoking Marsupials

    mooli-docs
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    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',
              }
            ],
            .......
          }
        }
      },
    };

    Keywords

    none

    Install

    npm i mooli-docs

    DownloadsWeekly Downloads

    12

    Version

    1.4.0

    License

    ISC

    Unpacked Size

    85.1 kB

    Total Files

    71

    Last publish

    Collaborators

    • wangwenshan