前言

在日常開發過程中，構建組件庫是必不可少的一環，此篇文章就是描述如何搭建一個完整的組件庫，解決組件庫開發發布過程中的如下問題：

1.如何在最少的依賴下快速開發一個vue組件。
2.如何將所有的包放置在一個git倉庫內。
3.如何將git倉庫內的所有包一鍵發布。
4.如何管理所有包的依賴，減少包的體積。
5.如何快速創建組件示例。
6.如何打包組件，webpack？

快速原型開發

開發組件和開發項目是不一樣的，在開發組件的時候，我們希望能夠有一種工具能夠快速針對某個vue文件搭建開發環境，并且在發布的時候能夠對其進行打包編譯，此時我們可以使用@vue/cli-service-global。

• 全局安裝
  此包必須全局安裝：

npm install -g @vue/cli-service-global

• 創建vue文件
  在根目錄下創建App.vue文件：

<template>
  <h1>Hello!</h1>
</template>

• 啟動開發服務器
  在命令行中執行:

vue serve

入口可以是 main.js、index.js、App.vue 或 app.vue 中的一個。你也可以顯式地指定入口文件：

vue serve App.vue

• 執行打包
  vue build

打包完成后，打包結果會放到dist目錄下， 默認情況下，會打包生成一個應用，該應用包含html和資源文件，可以直接部署為靜態站點。但是通常情況下，我們需要將組件打包成一個庫，以便發布后供項目使用。

打包成庫需要指定構建目標:

vue build --target lib

添加構建目標后，執行打包，dist目錄中包含各種規范的js文件和一個demo示例html。

目前為止，快速開發vue組件已經完成，我們可以快樂的開發各種組件，但是，當所需開發的組件慢慢變多之后，文件的組織方式成為我們需要考慮的事情。
可以想到有以下三種方式組織文件結構：

1.每一個組件都是一個單獨的倉庫。
2.一個倉庫中包含多個組件vue文件，作為一個包發布。
3.一個倉庫中包含多個組件包，每個組件包單獨發布。

第一種方式，每一個組件都是一個單獨倉庫，雖然有利于組件開發，但是組件維護起來比較麻煩。組件越多，需要維護的倉庫也就越多，當其中部分組件依賴的如lodash需要升級時，我們需要一個個進行升級，比較麻煩。

第二種方式，將所有的組件作為一個包發布，雖然維護比較方便，但是發布后，別人只想使用其中的一個組件時，會需要把整個組件庫引入，如果不提供按需加載，那么會造成項目中引入很多不必要的代碼。

第三種方式可參考下文。

monorepo

當我們查看 vue3 源碼時，可以看到，倉儲結構如下：

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 是實現monorepo的一種方式。

使用yarn workspace要求在根目錄的package.json中添加如下屬性：

{
    "private": true,
    "workspaces": ["packages/*"]
}

private屬性指定根目錄是私有的，不會被發布工具發布到npm上。

workspace屬性指定組件所在文件夾，支持通配符。

修改完package.json之后，按照vue-next的項目結構在packages文件夾下創建input測試組件。

假設，自定義的input組件依賴dayjs包，可以在根目錄下執行如下命令安裝：

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可以執行某個組件下的npm scripts，如給input組件添加一個build命令，可以在根目錄下通過如下命令執行build：

yarn workspace m-input run build

對于build這種命令，幾乎所有組件都需要，那么yarn workspace提供了一個快捷命令，可以一鍵執行所有組件包的build命令:

yarn workspaces run build

storybook

目前為止，倉庫的整體文件結構和組件庫的依賴包管理都已經完成了，可以愉快的開發組件了,當組件開發完成后，一般開發人員都會編寫相應的使用文檔，文檔中包含相應的使用示例.

storybook是可視化的組件管理展示平臺，支持在隔離的開發環境中，以交互式的方式展示組件，支持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頁面左側導航欄，每一個具名導出都是一個樣例。

最終執行yarn storybook，打開站點：

lerna

lerna 是babel團隊開源的用于管理多包倉庫的工具，也可以用于實現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執行包里面的相關命令

lerna run --scope my-component test

通過clean命令一鍵清除所有包的node_modules目錄：

lerna clean

learn最主要的功能是一鍵發布所有包的npm上：

lerna publish

發布包到npm需要登錄，可以通過 npm whoami 查看當前登錄用戶，通過 npm login 進行登錄。

單元測試

單元測試是組件化開發中必不可少的部分

安裝依賴：

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文件夾下添加相關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.執行測試命令
yarn test

測試可以在命令行中看到單元測試執行結果：

rollup打包

rollup是一個基于ESM的模塊打包工具，和webpack相比，其打包結果更小，因此適合打包框架或者組件庫。

安裝必須的依賴：

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.添加可執行命令
在package.json文件的scripts屬性下添加打包命令:

"build": "rollup -c"

-c指的是使用當前項目目錄下的配置文件rollup.config.js

1.執行命令
yarn build

執行完畢之后，可以看到打包結果。

• 多組件打包
  雖然可以用上述單組件打包的方式為每一個組件打包，但是這樣比較麻煩，可以在項目根目錄下通過一個配置文件打包所有組件。

此時需要添加額外依賴：

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.設置環境變量
利用cross-env設置環境變量，區分開發環境和生產環境:

"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
    })
]

// 如果不是開發環境，開啟壓縮
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
        }
    })

此時執行打包命令，可以一次性為所有組件包打包。

現在有個問題，每次打包的時候需要刪除上次打包結果，因此需要添加刪除命令:

安裝依賴包：

npm i -D rimraf

為每個組件包添加del命令：

"del": "rimraf dist"

在根目錄下添加clean命令：

"clean": "yarn workspaces run del"

此時執行yarn clean 就可以清除所有包的dist目錄。

plop模版

截止到目前為止，項目的整體結構已經完成，接下來就是無休止的添加組件了，但是考慮到每個組件的初始化有很多相同的工作需要手動完成，此時可以通過plop將這部分工作交給機器。

安裝依賴：

npm i plop -D

1.創建模版文件
在項目中添加plop-template/component文件夾，此文件夾下放置創建組件用的所有模版文件。

1.添加plopfile.js
該文件是plop插件執行的入口文件：

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添加一個可執行的命令，該命令會詢問用戶組件的名稱，然后將模版中所有的文件拷貝到packages相關文件夾內。

1.添加scripts命令
"plop": "plop"

此時在命令行中執行yarn plop component就可以創建組件了。