前端进阶必会的从零搭建组件库

背景

前端发展迅速，系统功能复杂，前端组件库成为前端工程化里非常重要的一环。

技术方案：

我们发现： 一个完整的组件库是什么， 首先他有一个组件平台， 其次，他有若干组件， 所以组件库=组件平台+ n* 组件

手写一个组件平台， 需要处理做的处理有很多：

• markdown文档（生成统一的模板， typescript 语法树解析插件）
• 代码规范（eslint, stylelint配置）
• 示例代码展示（代码工具插件）
• 动态编译效果
• 模拟预览效果（预览插件）
• 支持检索组件
• 生成组件列表，不同路由对应不同的组件
• 打包（组件打包，按需加载）

我们可以看到这个工程比较复杂，前期工作量比较大。现在市场上已经有很多 专门搭建组件平台 的脚手架，可以给我们节省很多的时间， 这里给大家推荐一个快速搭建组件平台的脚手架dumi ， 它是一款为组件开发场景而生的文档工具
📦 开箱即用，将注意力集中在组件开发和文档编写上
📋 丰富的 Markdown 扩展，不止于渲染组件 demo
🏷 基于 TypeScript 类型定义，自动生成组件 API
📱 支持移动端组件库研发
……

实践：

项目初始化

1. 环境准备 (确保 node 版本是 10.13 或以上。)，

  $ node -v
  v10.13.0

2. 组件脚手架

$ mkdir heima-ui && cd heima-ui
$ yarn create @umijs/dumi-lib --site

3. 安装 & 启动

yarn 
yarn start 

4. 尝试修改配置

**到目前为止，我们的组件平台就搭建好了， 可以看到 dumi 帮我们做了很多内置的功能， 让我们可以更专注的进行组件的开发。 下面我们来讲一下组件的设计，开发以及如何对组件进行单元测试，以及如何跟组建平台是如何关联的。 **

button 效果

添加组件（以button 为例）， 看下我们的组件是怎么设计的，以及跟组件平台是如何关联的。 我们先来看下button最终效果：

button 基础功能

• 根据示例 分析属性
• 抽离 属性
• 解构属性
• 编写：css
• 编写：markdown

button 代码优化

• classnames
• less全局变量 https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
• prefix 局部提升变量 & 全局提升 configProvider

总结：

我们实现了一个简单的button组件，但是在实际生产环境中，远比这个要复杂的多， 所以大家要勤加思考，多加练习，提升我们的抽象和封装能力。

单元测试

既然是一个组件库，那么我们的组件就会被多个业务应用到， 所以进行组件测试是非常有必要的。

单元测试：

• 举例： 订单场景
• 使用：
  • 库：react自带的测试库，react-test-renderer能够替代enzyme ，react-test-renderer 也认为enzyme在语法上更好一些
  • sum 函数
  • button组件测试

// 安装：
yarn add enzyme enzyme-adapter-react-16 enzyme-to-json -D


// 引入：
	import Enzyme,{ render, shallow } from 'enzyme';
	import Adapter from 'enzyme-adapter-react-16';
	import toJson from 'enzyme-to-json';

	Enzyme.configure({ adapter: new Adapter() });

//官网
	enzyme官网： https://enzymejs.github.io/enzyme/
	jest expect api:  https://www.jestjs.cn/docs/expect

总结好处：

• 我们不用把这些组件引入到工程中，就可以测试
• 可以测试多个不同的输入，不同的输出
• 边缘情况

组件主题配置

既然我们有了组件库，那么我们肯定有能力对所有的组件进行统一的修改， 这里就衍生出来一个功能点： 组件的主题配置。 比如说我们的app 可以提供明亮模式，暗黑模式， 有些app在重大节日的时候也会切换成节日模式。
核心： 定义一个变量， 然后需要支持主题配置的组件， 引用这个变量，再通过其他地方去修改这个变量就可以了。

打包编译发布

• 文档 打包， 文档部署到github
• 注册npm账号， 库的npm包发布
• 项目中引用测试。
• 迭代 - npm link （解决频繁部署问题）

总结

我们来回顾下今天的内容：
首先，我们分析了为什么要做一个组件库，以及搭建一个组件库的必要性。
其次， 我们分析了组件库的搭建思路，以及技术方案。（这里我们参考了antd的实现效果。使用了dumi脚手架进行开发）
随后，搭建了一个组件库， 开发一个button组件，并对这个button组件进行了单元测试，和优化。
我们还对组件库进行了扩展，如何实现主题配置
最后将我们的组件库进行了打包和部署。

视频教程：前端进阶从零搭建组件库