如何开发一个基于 Vue 的 ui 组件库（一）

开发模式

预览 demo

在开发一个 ui 组件库时，确定须要一边预览 demo，一边修改代码。

常见的解决方案是像开发通常项目同样使用 webpack-dev-server 预览组件，好比经过 vue-cli 初始化项目，或者本身配置脚本。

文艺一点儿地可能会用到 parcel 来简化 demo 的开发配置（好比 muse-ui）。

展现文档

做为一个 ui 组件库，也确定要有本身的组件展现文档。

通常业界常见方案是本身开发展现文档...

但这样会带来一个组件库和文档如何同步的问题。

为什么不用 vuepress？

因为 vuepress 支持在 markdown 中插入组件，因此咱们其实能够很天然地边写文档边开发组件。

从开发步骤上来讲，甚至能够先写文档说明，再具体地编写代码实现组件功能。这样一来文档便是预览 demo，与组件开发能够同步更新。

p.s. React 的组件文档能够试试这俩库：

• docz
• doc-scripts

类型声明

在开发和使用过程当中若是对于一些对象、方法的参数可以智能提示，岂不美哉？

如何实现呢？

其实就是在相应文件夹中添加组件相关的类型声明（*.d.ts），并经过 src/index.d.ts 导出。

{
    "typings": "src/index.d.ts",
}
复制代码

一开始将声明文件都放在 types/ 文件夹下，但在实践中以为仍是放在当前文件夹下比较好。一方面有利于维护，另外一方面是读取源码时也有类型提示。

如何打包

打包工具

和打包库同样，选了 rollup。

单文件组件

在开发中用不用 *.vue 这样的单文件组件来开发呢？

• muse-ui 彻底不写 <template> 只使用 render 函数。
• iview、element、vant 使用 .vue 文件，但样式单独写。
• ant-design-vue 使用 .jsx 文件，样式也单独写。
• vux 使用带 <style> 的 .vue 文件，但在使用时必须用 vux-loader。
• cube-ui 使用带 <style> 的 .vue 文件，但有一些配置。

讲道理，彻底不写 <template> 有点儿麻烦，因此添加了 rollup-plugin-vue 插件用于打包 .vue 文件。

但碰到一个问题：如何打包 <style> 中的样式？

• 首先尝试不写 <style>，直接在 js 里 import scss 文件。没问题，可是写组件时不直观，同一组件的代码也分散在了两个地方
• 接着尝试配置 rollup-plugin-vue，碰到一个 source-map 报错的问题。我提了个 issue。

加载方式

区分场景

为了区分不一样的场景使用不一样的 js，因此一共打包了三份 js（commonJs、es module、umd），以及一份压缩后的 css（dist/tua-ui.css）。

{
    "main": "dist/TuaUI.cjs.js",
    "module": "dist/TuaUI.es.js",
}
复制代码

完整加载

大部分 ui 库都支持完整加载，和把大象装冰箱同样简单（但 vux 只支持按需加载）：

1. 引入 js
2. 引入 css
3. 安装插件

import TuaUI from '@tencent/tua-ui'
import '@tencent/tua-ui/dist/tua-ui.css'

Vue.use(TuaUI)
复制代码

因缺思厅的是 cube-ui 把基础样式也写成 Vue 插件，致使按需引入的时候还要单独引入 Style，emmmmmmmmm...

import {
  /* eslint-disable no-unused-vars */
  Style, // <-- 不写这行按需引入时就没基础样式
  Button
} from 'cube-ui'
复制代码

按需加载

ui 库如果只能完整加载，显然会打包多余代码。

因此各类库通常都支持按需加载组件，大概分如下几种。

• muse-ui、iview、ant-design-vue、vant 经过 babel-plugin-import 插件实现。
• element 经过 babel-plugin-component（fork 自 babel-plugin-import）插件实现。
• vux 经过本身的 vux-loader 实现。
• cube-ui 经过配置 webpack 实现。

tree-shaking

webpack 其实在打包的时候是支持 tree-shaking 的，那么咱们能不能直接引用源码实现按需加载呢？

注意源码必须知足 es 模块规范（import、export）。

import { TuaToast } from '@tencent/tua-ui/src/'

Vue.use(TuaToast)
复制代码

尝试打包，发现 tree-shaking 并无起做用，仍是打包了全部代码。

sideEffects

其实问题出在没有在 ui 库的 package.json 中声明 sideEffects 属性。

在一个纯粹的 ESM 模块世界中，识别出哪些文件有反作用很简单。然而，咱们的项目没法达到这种纯度，因此，此时有必要向 webpack 的 compiler 提供提示哪些代码是“纯粹部分”。 —— 《webpack 文档》

注意：样式部分是有反作用的！即不该该被 tree-shaking！

如果直接声明 sideEffects 为 false，那么打包时将不包括样式！因此应该像下面这样配置：

{
    "sideEffects": [ "*.sass", "*.scss", "*.css" ],
}
复制代码

vuepress 组件样式

用 vuepress 写文档的时候，通常会在 docs/.vuepress/components/ 下写一些全局组件。

开发时没啥问题，可是发现一个坑：打包文档时发现组件里的样式 <style> 全丢了。

猜一猜缘由是什么？

这口锅就出在上一节的 sideEffects，详情看这个 issue。解决方案就是在 sideEffects 里加一条 "*.vue" 便可。

测试数据

下面我们打包一下安装了 ui 库的项目，看看按需加载的效果怎么样。

• Origin
  • dist/js/chunk-vendors.71ea9e72.js ----- 114.04 kb
• TuaToast
  • dist/js/chunk-vendors.beb8cff5.js ----- 115.03 kb
  • dist/css/chunk-vendors.97c93b2d.css ----- 0.79 kb
• TuaIcon
  • dist/js/chunk-vendors.25d8bdbd.js ----- 115.00 kb
  • dist/css/chunk-vendors.eab6517c.css ----- 6.46 kb
• TuaUI
  • dist/js/chunk-vendors.6e0e6390.js ----- 117.39 kb
  • dist/css/chunk-vendors.7388ba27.css ----- 8.04 kb

总结一下就是：

• 原始项目的 js 打包出来为 114.o4kb
• 只添加 TuaToast 后 js 增长了 0.99kb，css 增长了 0.79kb
• 只添加 TuaIcon 后 js 增长了 0.96kb，css 增长了 6.46kb
• 添加完整 TuaUI 后 js 增长了 3.35kb，css 增长了 8.04kb

能够看出按需加载仍是有效果的~

以上 to be continued...

参考资料

• vuepress 在 Markdown 中 使用 Vue
• muse-ui
• iview
• element
• ant-design-vue
• babel-plugin-import
• babel-plugin-component
• vux
• vant
• vux-loader
• cube-ui
• cube-ui 的后编译和普通编译
• tree-shaking
• rollup-plugin-vue
• source-map 报错的问题
• vuepress sideEffects issue