创建一个组件库

组件库一般分为两个主要部分，组件实现和文档示例。

目前考虑基于umi-library实现一个组件库。

umi-library

介绍

umi-library是一个基于rollup和docz实现的一个组件库工具，同时它也支持babel打包。

特性

  • ✔︎ 基于 docz 的文档功能
  • ✔︎ 基于 rollup 和 babel 的组件打包功能
  • ✔︎ 支持 TypeScript
  • ✔︎ 支持 cjs、esm 和 umd 三种格式的打包
  • ✔︎ esm 支持生成 mjs，直接为浏览器使用
  • ✔︎ 支持用 babel 或 rollup 打包 cjs 和 esm
  • ✔︎ 支持多 entry
  • ✔︎ 支持 lerna
  • ✔︎ 支持 css 和 less，支持开启 css modules

安装

Install umi-library via yarn or npm.

1
$ yarn add umi-library

使用

1
# Bundle library
2
$ umi-library build
3
4
# umi-lib is the alias for umi-library
5
$ umi-lib build
6
7
# dev with doc
8
$ umi-lib doc dev
9
10
# build doc
11
$ umi-lib doc build
12
13
# deploy doc to github.io
14
$ umi-lib doc deploy

docz

介绍

docz是一个非常简单的组件文档工具，基于MDX(Markdown + JSX)，支持typescript，但是只能用于react。

安装

1
$ yarn add docz docz-theme-default --dev

使用

1
$ yarn docz:dev

MDX例子

1
---
2
name: Hello world
3
---
4
5
import { Button } from './Button'
6
7
# Hello world
8
9
Hello, I'm still a mdx file, but now I have a button component!
10
11
<Button>Click</Button>

创建组件库

这里使用create-umi创建

1
$ mkdir demo
2
$ cd demo
3
$ yarn create umi

选择library，并按照提示填写相关内容，然后会得到一个这样的目录结构

1
.
2
├── .gitignore
3
├── .prettierignore
4
├── .prettierrc
5
├── .umirc.library.js
6
├── LICENSE
7
├── README.md
8
├── package.json
9
└── src
10
    ├── index.css
11
    ├── index.js
12
    └── index.mdx

然后添加typescript的支持

1
$ yarn add --dev tslint tslint-react typescript tslint-eslint-rules

创建tsconfig.json文件

1
{
2
  "compilerOptions": {
3
    "target": "esnext",
4
    "module": "esnext",
5
    "moduleResolution": "node",
6
    "importHelpers": true,
7
    "jsx": "react",
8
    "esModuleInterop": true,
9
    "sourceMap": true,
10
    "baseUrl": ".",
11
    "strict": true,
12
    "paths": {
13
      "@/*": ["src/*"]
14
    },
15
    "allowSyntheticDefaultImports": true
16
  }
17
}

创建tslint.yml文件，进行typescript的语法检测，类似于eslint.

1
defaultSeverity: error
2
extends:
3
  - tslint-react
4
  - tslint-eslint-rules
5
jsRules:
6
rules:
7
  eofline: true
8
  no-console: true
9
  no-construct: true
10
  no-debugger: true
11
  no-reference: true
12
  jsx-no-multiline-js: false

创建typings.d.ts文件，提供样式和图片的引入支持。

1
declare module '*.css';
2
declare module "*.png";
3
declare module '*.less';

在.umirc.library.js文件中添加docz的ts支持

1
export default {
2
  ......
3
  doc: {
4
    typescript: true,
5
  },
6
}

如果使用antd的话，添加按需加载的支持

1
$ yarn add --dev babel-plugin-import

在.umirc.library.js文件中添加

1
export default {
2
  ......
3
  extraBabelPlugins: [
4
    ['babel-plugin-import', {
5
      libraryName: 'antd',
6
      libraryDirectory: 'es',
7
      style: true,
8
    }]
9
  ],
10
}

剩下的就可以按照团队喜好添加各种eslint等的配置

虽然umi-library支持lerna，但是暂时只介绍单包方式

在src下创建各种组件的实现，然后在src/index.tsx中添加类似于

1
export { default as TestIcon } from './TestIcon';
2
3
export { default as TestInput } from './TestInput';
4
5
export { default as TestModal } from './TestModal';

然后就可以通过yarn build构建了

验证通过就可以进入愉快的发布流程。