说明文档

启动项目

执行 yarn install 执行 yarn start 启动

yarn
yarn start

脚手架初始化

新建一个空文件夹，然后使用脚手架初始化项目。

mkdir myapp && cd myapp
npx @umijs/create-dumi-lib
# or
yarn create @umijs/dumi-lib

默认文档目录

dumi 会默认使用 src 和 docs 目录下的 md 文件生成对应的文档。

运行查看效果

$ npm start

访问开发服务 http://localhost:8000。

打包编译

npm run build

编译使用的是 father-build，用于组件库打包,有一个特别需要注意的地方，如果组件中使用到第三方的库，那么需要这些库在 package.json 中的 dependencies 或者 preDependencies 中，一般的打包出错问题，几乎都是这个原因引起的。注意 dependencies 或者 preDependencies 中的包是我们需要的依赖，注意将组件库不需要的依赖，移到 devDependencies 中，如脚手架创建的项目，最终修改为

"dependencies": {
    "react": "^16.12.0"
  },
  "devDependencies": {
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.0.5",
    "dumi": "^1.0.5",
    "father-build": "^1.17.2",
    "lint-staged": "^10.0.7",
    "prettier": "^1.19.1",
    "yorkie": "^2.0.0"
  }

发布组件库

确定组件库名称，并确定名称未被其他人使用。如这里修改为 sirius-dumi-ui。然后执行 npm publish 将组件库发布到 npm 上。

使用组件库

yarn add sirius-dumi-ui

在页面中使用

import React from 'react';
import { Button } from 'sirius-dumi-ui';

export default () => <Button type="secondary">secondary</Button>;

构建及部署

执行 npm run docs:build (组件开发脚手架) / npm run build（静态站点脚手架), 或 npx dumi build 即可对我们的文档站点做构建，构建产物默认会输出到 dist 目录下，我们可以将 dist 目录部署在 Vercel、GitHub Pages 等静态站点托管平台或者某台服务器上。

研发云组件预览地址

http://172.16.108.81:9001/components/index.html#/

本地测试引用组件是否能用

1、首先使用 npm run build 完成构建打包

2、再在组件库目录下执行：npm link

3、最后在本地的使用组件的项目下执行：npm link sirius-dumi-ui

4、在本地的其他项目下引入组件库的 Bar 组件

import { Bar } from 'sirius-dumi-ui';

5、本地测试通过后需要在组件库目录执行 npm unlink

6、本地项目下取消引用组件：npm unlink sirius-dumi-ui