介绍

如何从0开始搭建组件库

要开发一个组件库首先我们要知道的是一个组件库包含哪些部分，参考国内的antd，element UI等UI组件框架基础部分都包含以下几个部分

• 组件源代码（Components）
• 组件文档工具（Doc）
• 测试（Test)
• 打包构建（Build）

组件源代码（Components）

组件的源代码，也是组件库的核心。这里我们以antd为例，耦合度非常的低，组件与组件之间没有太多的依赖关系，也便于整体项目的维护。antd源码是采用ts进行编写，对组件props参数进行了严格的规范，便于使用者阅读，也便于开发者的维护。

index.tsx 部分文件代码，所有组件将通过index.tsx汇集到一起进行导出打包。

export { default as Affix } from './affix';

export { default as Anchor } from './anchor';

export { default as AutoComplete } from './auto-complete';

export { default as Alert } from './alert';
复制代码

这部分的难点在如何编写出精致且能用于多种场景的组件，虽然没有复杂的业务逻辑，但是要多方面考虑使用者的体验。

组件使用文档工具（Doc）

组件编写好之后少不了的是对组件使用方式的描述，包括基本的描述、代码演示、API、注意事项。 这里简单介绍几款工具以及我们要使用的是哪款(现在前端生态真的是很丰富，能解决大部分的开发问题，以及你想要的工具)

我们这里采用的dumi工具，非常容易上手，中文文档齐全，支持 mdx 写法，能直接在 md 中编写 react 组件进行渲染。 而且是umi生态后劲十足，因为是3月2号才发布正式版所以star有点少，但是相信在蚂蚁金服作为爸爸的情况下还是能够发展的不错的。界面效果和antd也是极为相似。

// 创建组件开发的目录
$ mkdir library && cd library

// 安装 dumi
$ npm i dumi

// 创建文档
$ mkdir docs && echo '# Hello dumi!' > docs/index.md

// 预览文档
$ dumi dev
复制代码

测试（Test)

为了保证项目的稳定自动化测试起到一个非常关键的作用，react自动化测试要使用到的工具为

• jest
• enzyme
  Jest是一个JavaScript测试框架，旨在确保任意JavaScript代码的正确性。 它允许你用可访问的、熟悉的和功能丰富的 API 来写测试，让你快速获得结果。 enzyme 有点类似jquery，通过操作dom获取视图上真实存在的值。可能两句话还不能给大家直观的感受，上代码 。
  每一个describe都是一个测试用例，
  每一个it都是一个执行函数如果不能通过expect的检查那么将会被进行统计抛出测试异常。

import {shallow} from 'enzyme';
describe('Enzyme Shallow', function () {
  it('App\'s title should be Todos', function () {
    let app = shallow(<App/>);
    expect(app.find('h1').text()).to.equal('Todos');
  });
};
复制代码

文档地址： d.umijs.org/

打包

打包我们这里采用的 umi-father,也是属于umi生态，只需要简洁的配置就可以打包出任意你需要的格式， 这里给大家简单介绍几种打包格式：

• esm -> 浏览器环境
• cjs -> nodejs环境（测试|ssr）
• umd -> 通过浏览器script引入的方式
  安装

yarn add father
复制代码

打包

father build
复制代码

新建 .fatherrc.js 文件进行配置打包的时候会自动识别这个配置文件然后进行打包处理

export default {
  extractCSS: true,
  esm: {
    type: 'rollup'
  },
  cjs: 'rollup',
  extraBabelPlugins: [
    ['import', { libraryName: 'tts', libraryDirectory: 'es', style: true }],
  ],
  entry: '/components/index.ts',
  lessInBabelMode: true,
}
复制代码

文档地址 github.com/umijs/fathe…

组件上传

在npm上我们可以上传自己的组件，首先你得需要一个npm账号，注册好这个账号之后，在本地通过命令行npm login来进行登录, 然后通过npm publish来进行上传，但是这里要特别注意的是通过package.json文件来做一些配置。

• name: 配置包的名称
• version: 版本号
• main: 包主入口
• files： 你要上传那些文件件

企业私有组件库

为了保护自己企业内部的一些库的安全性，和私密性，可以选择两种方案，一种是购买npm的付费服务，就好像github的付费服务一样的你可以自定义自己私有的库，还有一种就是搭建自己私有的npm库，那么大家肯定会问怎么获取公有的npm包呢，这里有个verdaccio工具帮我解决了这个问题，它的核心原理是修改npm远程获取包的链接，那么在npm install 的过程中，他会先获取 verdaccio 上面我们挂载的包，如果 verdaccio 包管理工具没有，那么他就会去获取 npm 上面的包，就解决了这个问题。 安装

npm install -g verdaccio
复制代码

启动

$> verdaccio
warn --- config file  - /home/.config/verdaccio/config.yaml
warn --- http address - http://localhost:4873/ - verdaccio/3.0.0
复制代码

你可以通过以下命令来设置npm从哪个源下载

npm set registry http://localhost:4873/
复制代码

你也可以在下载的时候带上参数

npm install --registry http://localhost:4873
复制代码

当我们去下载npm包的时候就会去自己的包管理服务去下载了 文档地址： verdaccio.org/

组件库示例

• npm地址：www.npmjs.com/package/rea…
  这个包实现了一个react Button 组件，其他组件还需要完善
• 源码地址：后续开放到github
• api文档地址： 需要一台云服务部署一下

总结

其实开发一个私有的ui组件库并不难，难就难在需要大量的前端知识做支撑，不是需要知识面有多深而是知识面要很广，react、js、ts、less、webpack、npm 包管理、jest、enzyme、babel、等等，深度的问题是留在我们具体写某些组件需要思考的。本文的也是给大家提供一些思路，具体的描述也不是最全面的，还有很多内容是可以扩展的，大家可以相互探讨学习。 微信公众号二维码.jpg