打造react企业私有化组件库

介绍

随着web框架不断完善和壮大，愈来愈多的前端团队开始搭建内部的组件库，虽然市场上已经有不少功能强大且完善的UI组件库提供给咱们使用，例如，react 开源的就有 antd, material。 vue开源组件库有 element UI、 iView 等等。用这些框架能够快速的开发一个B端的产品，可是面对日益变化的用户需求，和一些定制化的交互场景，咱们可能须要对已有组件进行二次开发，或者是基于原有组件的升级和进行一些定制化的功能开发。对于一些C端用户最求更为差别化的UI设计效果和高效的交互体验更须要企业本身内部共享的组件库。

如何从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、注意事项。 这里简单介绍几款工具以及咱们要使用的是哪款(如今前端生态真的是很丰富，能解决大部分的开发问题，以及你想要的工具)

名称	描述	上手程度	地址	star
bisheng	antd使用	⭐️	www.npmjs.com/package/bis…	2.3k
docz	排行老二	⭐️⭐️⭐️	www.npmjs.com/package/doc…	18.1k
Storybook	功能齐全，提供不少使用插件	⭐️⭐️	www.npmjs.com/package/doc…	46.2k
dumi	umi生态 蚂蚁金服 sorrycc 主导开发	⭐️⭐️⭐️⭐️⭐️	github.com/umijs/dumi	213

咱们这里采用的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