摘要：手牽手搭建前端組件庫本文梳理如何搭建和構(gòu)建前端組件庫了解幾個問題為何需要組件化大部分項目起源都是源于業(yè)務(wù)方的各種各樣的奇葩需求。作者是否私有，需要修改為才能發(fā)布到開源協(xié)議參考配置添加文件發(fā)布時，只有編譯后的目錄才需要被發(fā)布。

本文梳理如何搭建和構(gòu)建前端組件庫.

了解幾個問題

為何需要組件化？

大部分項目起源都是源于業(yè)務(wù)方的各種各樣的奇葩需求。隨著公司的業(yè)務(wù)發(fā)展，公司內(nèi)部開始衍生出很多的B2C系統(tǒng)、后臺系統(tǒng)，前端部門也疲于應(yīng)對越來越多同質(zhì)化的項目，這些項目在很多基礎(chǔ)模塊層、源代碼存在不小的相似，甚至存在相似的業(yè)務(wù)模塊。

筆者曾經(jīng)所在的一個電商團隊，前端成員基本每個人多做過登錄注冊、購物車、支付、微信登錄...... 大量重復(fù)的業(yè)務(wù)代碼。由于組內(nèi)技術(shù)沒有強制規(guī)范

本質(zhì)上相同的東西，重復(fù)的去code就顯得浪費.

分析這些問題發(fā)現(xiàn)：
日漸增多的業(yè)務(wù)場景需求

前端資源有限，無法支持所有項目的快速迭代

公司內(nèi)部諸多產(chǎn)品業(yè)務(wù)混亂、體驗不統(tǒng)一

于是開發(fā)底層的工具去服務(wù)不同業(yè)務(wù)就很有必要：
設(shè)計一套公司內(nèi)部的基礎(chǔ)組件庫支撐各個前端項目，提升項目和業(yè)務(wù)的可用性和一致性。

一個前端團隊擁有大量的業(yè)務(wù)場景和業(yè)務(wù)代碼，相似的頁面和代碼層出不窮，如何管理和抽象這些相似的代碼和模塊，絕大多數(shù)團隊會遇到這樣的問題。 不斷的拷代碼？ 修改代碼？還是抽象成組件？顯然后者更高效。所以在多項目存在高度的可控、底層依賴的情況下，前端實現(xiàn)組件庫是最好的選擇。

組件化，又或者組件抽離的目的是為了功能共享方便維護(hù)，其能夠帶來的好處是少寫代碼，統(tǒng)一管理、統(tǒng)一維護(hù)。一套基礎(chǔ)組件代碼千錘百煉精而又精，從而起到快速支撐業(yè)務(wù)迭代，提升開發(fā)效率的目的。

業(yè)務(wù)型組件庫

前端組件庫百花齊放，antd、element ui這些基礎(chǔ)組件庫已經(jīng)很強大，使用于各種業(yè)務(wù)場景。但是這些基礎(chǔ)組件的粒度是基于單個交互，而在交互與產(chǎn)品之間隔著各種各樣的模塊和業(yè)務(wù)場景，產(chǎn)品的匯聚源于各種基礎(chǔ)組件在業(yè)務(wù)邏輯的沾粘下集成為一個個項目，一個團隊或多或少會有項目或模塊存在功能、交互流程的重復(fù)、本質(zhì)上的同質(zhì)化。

所以antd、element ui 這類組件庫是基于單個非連續(xù)性的交互組件，一個組件代表著一次人機無副作用的操作與響應(yīng)，其不思考實體、用戶、終端的狀態(tài)，最小化的暴露和響應(yīng)組件內(nèi)部狀態(tài)。對于連續(xù)性的交互通常來說與特點的業(yè)務(wù)場景有關(guān)，存在諸多的外部依賴，目前都是在各個業(yè)務(wù)模塊由用戶（coder）自行編寫。

有沒有一種方法解決連續(xù)性交互流程的共用問題？

解決的辦法是組件封裝包含業(yè)務(wù)場景的連續(xù)性交互流程，利用組件化將內(nèi)部依賴通過接口映射到外部。

前端架構(gòu)部門為業(yè)務(wù)部門提供業(yè)務(wù)型組件庫能夠有效提高開發(fā)效率.

組件庫設(shè)計思路

組件是對一些具有相同業(yè)務(wù)場景和交互模式、交互流程代碼的抽象，組件庫首先應(yīng)該保證各個組件的視覺風(fēng)格和交互規(guī)范保持一致。組件庫的 props 定義需要具備足夠的可擴展性，對外提供組件內(nèi)部的控制權(quán)，使組件內(nèi)部完全受控。支持通過 children 自定義內(nèi)部結(jié)構(gòu)，預(yù)定義組件交互狀態(tài)。保持組件具有統(tǒng)一的輸入和輸出，完整的API.

組件庫的開發(fā)我們需要考慮：

組件設(shè)計思路、需要解決的場景

組件代碼規(guī)范

組件測試

組件維護(hù)，包括迭代、issue、文檔、發(fā)布機制

一個完整強大的組件庫需要多方面努力，回歸正題.

使用到的基礎(chǔ)技術(shù)

vue cil 3

npm

webpack

rollup（v1.2.2）

Demo

下面就手把手搭建一個前端偏業(yè)務(wù)性的組件庫。

組件庫包括：

message 組件： 一個封裝用于呈現(xiàn)后臺通過 websocket 推送到前臺頁面的實時消息模塊；

pay 組件： 一個封裝用于實現(xiàn)商品支付的模塊

share 組件： 一個封裝用于實現(xiàn)商品、文章、視頻在各社交平臺分享的模塊

只拋出一個栗子，組件內(nèi)部實現(xiàn)略~

這里注意組件抽取的粒度，組件的抽離以一個完整的連續(xù)性交互為目地。

組件依賴數(shù)據(jù)、交互事件、控制權(quán)的暴露需要考慮全面，不同的上層業(yè)務(wù)部門都有自己對組件可配置的不同渴望。需要權(quán)衡，不能把配置化給搗鼓的永無止境到很難堪的局面。筆者曾經(jīng)就參與一個項目的組件化，組件抽離的面目全非，各種依賴、環(huán)境、狀態(tài)的配置，導(dǎo)致最后只有組件編寫人員在看文檔加回憶的情況下才能搞清楚其來龍去脈.

從簡單的開始~

創(chuàng)建一個空項目

// 新建一個項目
vue create qw-ui

經(jīng)過vue cil3初始化后的qw-ui目錄：

├─docs
│          
├─public
│
├─src
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│         

此時為了方便組件庫的代碼管理，將目錄結(jié)構(gòu)修改為：

├─src        // 用作示例 Demo
│          
├─packages   // 新增 packages 用于編寫存放組件
│
├─lib        // 新增 lib 用于存放編譯后的輸出文件
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│   

目錄結(jié)構(gòu)可以更具需要調(diào)整.

vue cli3 提供一個可選的 vue.config.js 配置文件。這個文件存在則他會被自動加載，所有的對項目和webpack的配置，都在這個文件中。

修改 vue.config.js 配置的目的主要是：

使 Demo 可訪問，實現(xiàn)對 src目錄的編譯處理；

提供對 package的編譯、構(gòu)建處理

做以下兩處修改：

修改項目的入口

entry 字段為項目入口

入口修改使用 Vue CLI 3 的 page屬性來配置：

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: "src/main.js",
      // 模板來源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html"
    }
  }
}

添加對 packages 目錄的編譯處理

packages 是我們后來新增的一個目錄，默認(rèn)是不被 webpack 處理的，所以需要通過添加配置對該目錄的編譯支持。

新增編譯處理目錄，需要通過webpack的鏈?zhǔn)讲僮鱟hainWebpack函數(shù)實現(xiàn)：

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: "examples/main.js",
      // 模板來源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html"
    }
  },
    chainWebpack: config => {
        // packages和examples目錄需要加入編譯
        config.module
            .rule("js")
            .include.add(/packages/)
            .end()
            .include.add(/src/)
            .end()
            .use("babel")
            .loader("babel-loader")
            .tap(options => {
                // 修改它的選項...
                return options;
            });
    }
}

執(zhí)行 npm run vue-cli-service serve , 實現(xiàn)對Demo的訪問.

創(chuàng)建一個 message組件

創(chuàng)建組件

在 packages 目錄下，所有的單個組件都以文件夾的形式存儲，這里創(chuàng)建一個目錄 message 文件夾；

在 message/ 目錄下創(chuàng)建 src/ 目錄存儲組件源碼，所有 message 依賴的除第三方資源都存放與該目錄下；

在 /message目錄下創(chuàng)建 index.js` 文件對外提供對組件的引用

示例代碼：

message/index.js 對外提供應(yīng)用

// message/index.js

import message  from "./src/message "

message .install = function (Vue) {
  Vue.component(message .name, message )
}

export default message 

// message/src/message .js

需要注意的是，組件 mesage 必須聲明 name 屬性，這個 name 就是組件的標(biāo)簽，如：

packages/message目錄結(jié)構(gòu)如下：

packages/message
            ├─index.js
            │          
            ├─src
                │      message.vue
                │      st.png         // 組件依賴的圖片
                │      index.scss    // 組件依賴的樣式文件

導(dǎo)出 packages 組件庫

修改 /packages/index.js 文件，整合所有組件，并對整個組件庫進(jìn)行導(dǎo)出：

// 導(dǎo)入組件
import hello from "./hello"

// 存儲組件列表
const components = [
  hello
]

// 定義 install 方法，接收 Vue 作為參數(shù)。如果使用 use 注冊插件，則所有的組件都將被注冊
const install = function (Vue) {
  // 判斷是否安裝
  if (install.installed) return
  // 遍歷注冊全局組件
  components.map(component => Vue.component(component.name, component))
}

// 判斷是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue)
}

export default {
  // 導(dǎo)出的對象必須具有 install，才能被 Vue.use() 方法安裝
  install,
  // 以下是具體的組件列表
  hello
}

到此，構(gòu)建組件庫的環(huán)境準(zhǔn)好好了

?

### 4、發(fā)布組件庫到 npm

packages 目錄的編譯打包

在 package.json的 scripts 字段中新增一下命令：

"lib": "vue-cli-service build --target lib --name kui --dest lib packages/index.js"

vue cil3 提供了 [庫模式](https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93) 來打包第三方庫的開發(fā)，packages 的編譯打包需要使用庫模式

--target: 構(gòu)建目標(biāo)，默認(rèn)為應(yīng)用模式。這里修改為 lib 啟用庫模式。

--dest : 輸出目錄，默認(rèn) dist。這里我們改成 lib

[entry]: 最后一個參數(shù)為入口文件，默認(rèn)為 src/App.vue。這里我們指定編譯 packages/ 組件庫目錄。

在 vue cil3  庫模式中，Vue 是外置的。這意味著包中不會有 Vue，即便你在代碼中導(dǎo)入了 Vue。如果這個庫會通過一個打包器使用，它將嘗試通過打包器以依賴的方式加載 Vue；否則就會回退到一個全局的 Vue 變量。

配置好了后，執(zhí)行編譯命令:

npm run lib

稍后控制臺輸出，即編譯完成：

 DONE  Compiled successfully in 5988ms16:05:35

  File                  Size                       Gzipped

  libkui.umd.min.js    8.08 KiB                   4.55 KiB
  libkui.umd.js        17.78 KiB                  7.31 KiB
  libkui.common.js     17.41 KiB                  7.19 KiB
  libkui.css           0.10 KiB                   0.10 KiB

  Images and other types of assets omitted.

 Total task duration: 8.71s
 ```

package.json 配置

name: 包名，該名字是唯一的。可在 npm 官網(wǎng)搜索名字。

version: 版本號，每次發(fā)布至 npm 需要修改版本號，不能和歷史版本號相同。

description: 描述。

main: 入口文件，該字段需指向我們最終編譯后的包文件。

keyword：關(guān)鍵字，以空格分離希望用戶最終搜索的詞。

author：作者

private：是否私有，需要修改為 false 才能發(fā)布到 npm

license： 開源協(xié)議

參考配置：

{
  "name": "qw-ui",
  "version": "0.1.0",
  "private": false,
  "main": "lib/kui.umd.min.js",
  "description": "qw-ui",
  "keyword": "qw-ui",
  "author":"luojh",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name kui --dest lib packages/index.js"
  }
}

添加 .npmignore 文件

發(fā)布時，只有編譯后的 lib 目錄、package.json、README.md才需要被發(fā)布。所以通過配置.npmignore文件忽略不需要提交的目錄和文件。

# 忽略目錄
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

# 本地文件
.env.local
.env.*.local

# 日志文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 編輯器緩存文件
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

發(fā)布到 npm

首先需要在 npm 官網(wǎng)上注冊一個賬號，通過 npm adduser 命令創(chuàng)建一個賬戶，或者在 npm 官網(wǎng)注冊

注冊完成后在本地命令行中登錄：

npm login

執(zhí)行發(fā)布命令，發(fā)布到 npm

npm publish

npm 淘寶鏡像不支持 publish 命令，如果設(shè)置了淘寶鏡像，publish 前需將鏡像設(shè)置會 npm :
npm config set registry http://registry.npmjs.org

npm publish時，本地cmd終端需通過管理員運行

?

### 5.使用組件庫

安裝發(fā)布的組件庫：

npm i qw-ui

使用組件：

# 在 main.js 引入并注冊
import qwui from "qw-ui"
Vue.use(qwui)

# 在組件中使用

完！