前言
在日常開發(fā)過程中，構(gòu)建組件庫是必不可少的一環(huán)夕吻，此篇文章就是描述如何搭建一個完整的組件庫，解決組件庫開發(fā)發(fā)布過程中的如下問題：
1.如何在最少的依賴下快速開發(fā)一個vue組件仇味。
2.如何將所有的包放置在一個git倉庫內(nèi)硫惕。
3.如何將git倉庫內(nèi)的所有包一鍵發(fā)布。
4.如何管理所有包的依賴，減少包的體積截汪。
5.如何快速創(chuàng)建組件示例疾牲。
6.如何打包組件，webpack挫鸽？
快速原型開發(fā)
開發(fā)組件和開發(fā)項目是不一樣的说敏，在開發(fā)組件的時候，我們希望能夠有一種工具能夠快速針對某個vue文件搭建開發(fā)環(huán)境丢郊，并且在發(fā)布的時候能夠?qū)ζ溥M行打包編譯盔沫，此時我們可以使用@vue/cli-service-global。
- 全局安裝
此包必須全局安裝：
npm install -g @vue/cli-service-global
- 創(chuàng)建vue文件
在根目錄下創(chuàng)建App.vue文件：
<template>
<h1>Hello!</h1>
</template>
- 啟動開發(fā)服務(wù)器
在命令行中執(zhí)行:
vue serve
入口可以是 main.js枫匾、index.js架诞、App.vue 或 app.vue 中的一個。你也可以顯式地指定入口文件：
vue serve App.vue
- 執(zhí)行打包
vue build
打包完成后干茉，打包結(jié)果會放到dist目錄下谴忧， 默認情況下，會打包生成一個應(yīng)用角虫，該應(yīng)用包含html和資源文件沾谓，可以直接部署為靜態(tài)站點。但是通常情況下戳鹅，我們需要將組件打包成一個庫均驶，以便發(fā)布后供項目使用。
打包成庫需要指定構(gòu)建目標:
vue build --target lib
添加構(gòu)建目標后枫虏，執(zhí)行打包妇穴，dist目錄中包含各種規(guī)范的js文件和一個demo示例html。
目前為止隶债，快速開發(fā)vue組件已經(jīng)完成腾它，我們可以快樂的開發(fā)各種組件，但是死讹，當所需開發(fā)的組件慢慢變多之后瞒滴，文件的組織方式成為我們需要考慮的事情。
可以想到有以下三種方式組織文件結(jié)構(gòu)：
1.每一個組件都是一個單獨的倉庫赞警。
2.一個倉庫中包含多個組件vue文件逛腿，作為一個包發(fā)布。
3.一個倉庫中包含多個組件包仅颇，每個組件包單獨發(fā)布单默。
第一種方式，每一個組件都是一個單獨倉庫忘瓦，雖然有利于組件開發(fā)搁廓，但是組件維護起來比較麻煩引颈。組件越多，需要維護的倉庫也就越多境蜕，當其中部分組件依賴的如lodash需要升級時蝙场，我們需要一個個進行升級，比較麻煩粱年。
第二種方式售滤，將所有的組件作為一個包發(fā)布，雖然維護比較方便台诗，但是發(fā)布后完箩，別人只想使用其中的一個組件時，會需要把整個組件庫引入拉队，如果不提供按需加載弊知，那么會造成項目中引入很多不必要的代碼。
第三種方式可參考下文粱快。
monorepo
當我們查看 vue3 源碼時秩彤，可以看到，倉儲結(jié)構(gòu)如下：
packages
├── compiler-core
├──_tests_ #單元測試
├──src #源文件目錄
├──package.json
├── compiler-dom
├──_tests_ #單元測試
├──src #源文件目錄
├──package.json
package.json
這個就是典型的monorepo 事哭，monorepo是項目代碼的一種管理方式漫雷，指在一個倉庫中管理多個模塊/包。
monorepo追求的是在一個倉庫中管理多個模塊鳍咱，每個模塊有獨立的package.json管理各自依賴降盹，同時在項目根目錄下可以通過命令安裝或升級模塊依賴，并提供了一個模塊共享的node_modules流炕。
yarn workspace
yarn workspace 是實現(xiàn)monorepo的一種方式。
使用yarn workspace要求在根目錄的package.json中添加如下屬性：
{
"private": true,
"workspaces": ["packages/*"]
}
private屬性指定根目錄是私有的仅胞，不會被發(fā)布工具發(fā)布到npm上每辟。
workspace屬性指定組件所在文件夾，支持通配符干旧。
修改完package.json之后渠欺，按照vue-next的項目結(jié)構(gòu)在packages文件夾下創(chuàng)建input測試組件。
假設(shè)椎眯，自定義的input組件依賴dayjs包挠将，可以在根目錄下執(zhí)行如下命令安裝：
yarn workspace m-input add dayjs
其中m-input并不是packages下組件文件夾的名稱，而是組件文件夾下package.json中的name屬性值编整。
安裝完成后舔稀，dayjs會自動添加到input組件的package.json下，但是包下載到了根目錄下的node_modules文件夾中掌测，這樣做可以更好的管理多組件包的依賴内贮。如果當前組件依賴的包版本和其他組件依賴的包版本不一樣，如其他組件依賴lodash@4，當前組件依賴lodash@3夜郁， 此時依賴包會被下載到當前組件文件夾下的node_modules中什燕。
通過yarn workspace可以執(zhí)行某個組件下的npm scripts，如給input組件添加一個build命令竞端，可以在根目錄下通過如下命令執(zhí)行build：
yarn workspace m-input run build
對于build這種命令屎即，幾乎所有組件都需要，那么yarn workspace提供了一個快捷命令事富，可以一鍵執(zhí)行所有組件包的build命令:
yarn workspaces run build
storybook
目前為止技俐，倉庫的整體文件結(jié)構(gòu)和組件庫的依賴包管理都已經(jīng)完成了，可以愉快的開發(fā)組件了,當組件開發(fā)完成后赵颅，一般開發(fā)人員都會編寫相應(yīng)的使用文檔虽另，文檔中包含相應(yīng)的使用示例.
storybook是可視化的組件管理展示平臺，支持在隔離的開發(fā)環(huán)境中饺谬，以交互式的方式展示組件捂刺，支持vue，react等募寨。
安裝使用：
npx -p @storybook/cli sb init --type vue
yarn add vue -W
yarn add vue-loader vue-template-compiler --dev -W
修改配置：
安裝完成之后族展，在根目錄的.storybook文件夾下存放著storybook使用的所有配置文件，修改main.js中stories屬性拔鹰，將其指向packages所有組件下的.stories.js文件仪缸。
"stories": [
"../packages/**/*.stories.mdx",
"../packages/**/*.stories.@(js|jsx|ts|tsx)"
]
添加組件示例：
在input組件包中添加 Input.stories.js 文件：
import MInput from './index'
export default {
title: 'MInput',
component: MInput
};
export const Text = () => ({
components: { MInput },
template: '<m-input />',
});
export const Password = () => ({
components: { MInput },
template: '<m-input type="password" placeholder="請輸入密碼"/>',
});
其中默認導出是storybook頁面左側(cè)導航欄，每一個具名導出都是一個樣例列肢。
最終執(zhí)行yarn storybook恰画，打開站點：
lerna
lerna 是babel團隊開源的用于管理多包倉庫的工具，也可以用于實現(xiàn)monorepo瓷马。
安裝lerna：
npm install lerna -g
初始化lerna:
lerna init
會在項目根目錄下添加lerna.json配置文件拴还。
可以使用lerna管理項目依賴：
如果當前form自定義組件依賴input自定義組件，可以使用：
lerna add input --scope=form
還可以使用import命令導入本地包：
lerna import <path-to-external-repository>
通過exec和run執(zhí)行包里面的相關(guān)命令
lerna run --scope my-component test
通過clean命令一鍵清除所有包的node_modules目錄：
lerna clean
learn最主要的功能是一鍵發(fā)布所有包的npm上：
lerna publish
發(fā)布包到npm需要登錄欧聘，可以通過 npm whoami 查看當前登錄用戶片林，通過 npm login 進行登錄。
單元測試
單元測試是組件化開發(fā)中必不可少的部分
安裝依賴：
npm i jest @vue/test-utils vue-jest babel-jest -D
1.添加jest配置文件jest.config.js
module.exports = {
"testMatch": ["**/_tests_/**/*.[jt]s?(x)"],
"moduleFileExtensions": [
"js",
"json",
// 告訴 Jest 處理 `*.vue` 文件
"vue"
],
"transform": {
// 用 `vue-jest` 處理 `*.vue` 文件
".*\\.(vue)$": "vue-jest",
// 用 `babel-jest` 處理 js
".*\\.(js)$": "babel-jest"
}
}
1.添加babel配置文件babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env'
]
]
}
1.添加測試命令
"test": "jest"
1.添加測試文件
在組件包的tests文件夾下添加相關(guān)js文件怀骤，如input包下面添加input.test.js
import input from '../src/index.js'
import { mount } from '@vue/test-utils'
describe('m-input', () => {
test('input-text', () => {
const wrapper = mount(input)
expect(wrapper.html()).toContain('input type="text"')
})
})
1.執(zhí)行測試命令
yarn test
測試可以在命令行中看到單元測試執(zhí)行結(jié)果：
rollup打包
rollup是一個基于ESM的模塊打包工具费封，和webpack相比，其打包結(jié)果更小蒋伦，因此適合打包框架或者組件庫弓摘。
安裝必須的依賴：
npm i rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D
需要注意的是安裝vue時需要指定版本，否則會安裝vue3痕届。
- 單組件打包
1.添加配置文件
在組件中添加rollup.config.js文件衣盾，該文件是rollup打包的配置文件寺旺，指定起始文件，輸出文件位置及格式势决，插件阻塑。
import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'
module.exports = {
input: 'src/index.js',
output: [
{
file: 'dist/index.js',
format: 'es'
}
],
plugins: [
vue({
css: true,
compileTemplate: true
}),
terser()
]
}
1.添加可執(zhí)行命令
在package.json文件的scripts屬性下添加打包命令:
"build": "rollup -c"
-c指的是使用當前項目目錄下的配置文件rollup.config.js
1.執(zhí)行命令
yarn build
執(zhí)行完畢之后，可以看到打包結(jié)果果复。
- 多組件打包
雖然可以用上述單組件打包的方式為每一個組件打包陈莽，但是這樣比較麻煩，可以在項目根目錄下通過一個配置文件打包所有組件虽抄。
此時需要添加額外依賴：
npm i @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve cross-env -D
1.為組件指定入口文件
在每個包下的package.json文件中添加main和module屬性：
"main": "dist/cjs/index.js",
"module": "dist/es/index.js",
1.設(shè)置環(huán)境變量
利用cross-env設(shè)置環(huán)境變量走搁，區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境:
"build:prod": "cross-env NODE_ENV=production rollup -c",
"build:dev": "cross-env NODE_ENV=development rollup -c"
1.添加配置文件
在項目的根目錄下添加rollup.config.js文件，該文件會遍歷packages文件夾下的所有文件夾并打包:
import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'
import { nodeResolve } from '@rollup/plugin-node-resolve'
const isDev = process.env.NODE_ENV !== 'production'
// 公共插件配置
const plugins = [
vue({
css: true,
compileTemplate: true
}),
json(),
nodeResolve(),
postcss({
// 把 css 插入到 style 中
// inject: true,
// 把 css 放到和js同一目錄
extract: true
})
]
// 如果不是開發(fā)環(huán)境迈窟，開啟壓縮
isDev || plugins.push(terser())
// packages 文件夾路徑
const root = path.resolve(__dirname, 'packages')
module.exports = fs.readdirSync(root)
.filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
.map(item => {
// 獲取每個包的配置文件
const pkg = require(path.resolve(root, item, 'package.json'))
return {
input: path.resolve(root, item, 'src/index.js'),
output: [
{
exports: 'auto',
file: path.resolve(root, item, pkg.main),
format: 'cjs'
},
{
exports: 'auto',
file: path.join(root, item, pkg.module),
format: 'es'
},
],
plugins: plugins
}
})
此時執(zhí)行打包命令私植，可以一次性為所有組件包打包。
現(xiàn)在有個問題车酣，每次打包的時候需要刪除上次打包結(jié)果曲稼，因此需要添加刪除命令:
安裝依賴包：
npm i -D rimraf
為每個組件包添加del命令：
"del": "rimraf dist"
在根目錄下添加clean命令：
"clean": "yarn workspaces run del"
此時執(zhí)行yarn clean 就可以清除所有包的dist目錄。
plop模版
截止到目前為止湖员，項目的整體結(jié)構(gòu)已經(jīng)完成贫悄，接下來就是無休止的添加組件了，但是考慮到每個組件的初始化有很多相同的工作需要手動完成娘摔，此時可以通過plop將這部分工作交給機器窄坦。
安裝依賴：
npm i plop -D
1.創(chuàng)建模版文件
在項目中添加plop-template/component文件夾，此文件夾下放置創(chuàng)建組件用的所有模版文件凳寺。
1.添加plopfile.js
該文件是plop插件執(zhí)行的入口文件：
module.exports = plop => {
plop.setGenerator('component', {
description: 'create a custom component',
prompts: [
{
type: 'input',
name: 'name',
message: 'component name',
default: 'MyComponent'
}
],
actions: [
{
type: 'add',
path: 'packages/{{name}}/src/{{name}}.vue',
templateFile: 'plop-template/component/src/component.hbs'
}
]
})
}
為plop添加一個可執(zhí)行的命令鸭津，該命令會詢問用戶組件的名稱，然后將模版中所有的文件拷貝到packages相關(guān)文件夾內(nèi)肠缨。
1.添加scripts命令
"plop": "plop"
此時在命令行中執(zhí)行yarn plop component就可以創(chuàng)建組件了逆趋。
