如何開發一個基於 Vue 的 ui 組件庫（一）

時間 2019-11-21

標籤如何開發一個基於 vue 組件简体版

原文原文鏈接

開發模式

預覽 demo

在開發一個 ui 組件庫時，確定須要一邊預覽 demo，一邊修改代碼。css

常見的解決方案是像開發通常項目同樣使用 webpack-dev-server 預覽組件，好比經過 vue-cli 初始化項目，或者本身配置腳本。html

文藝一點兒地可能會用到 parcel 來簡化 demo 的開發配置（好比 muse-ui）。vue

展現文檔

做爲一個 ui 組件庫，也確定要有本身的組件展現文檔。webpack

通常業界常見方案是本身開發展現文檔...git

但這樣會帶來一個組件庫和文檔如何同步的問題。github

爲什麼不用 vuepress？

因爲 vuepress 支持在 markdown 中插入組件，因此咱們其實能夠很天然地邊寫文檔邊開發組件。web

從開發步驟上來講，甚至能夠先寫文檔說明，再具體地編寫代碼實現組件功能。這樣一來文檔便是預覽 demo，與組件開發能夠同步更新。vue-cli

p.s. React 的組件文檔能夠試試這倆庫：json

類型聲明

在開發和使用過程當中若是對於一些對象、方法的參數可以智能提示，豈不美哉？sass

如何實現呢？

其實就是在相應文件夾中添加組件相關的類型聲明（*.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 只支持按需加載）：

引入 js
引入 css
安裝插件

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