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

本文梳理如何搭建和構建前端組件庫.

了解幾個問題

為何需要組件化？

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

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

本質上相同的東西，重復的去code就顯得浪費.

分析這些問題發現：
日漸增多的業務場景需求

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

公司內部諸多產品業務混亂、體驗不統一

于是開發底層的工具去服務不同業務就很有必要：
設計一套公司內部的基礎組件庫支撐各個前端項目，提升項目和業務的可用性和一致性。

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

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

業務型組件庫

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

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

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

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

前端架構部門為業務部門提供業務型組件庫能夠有效提高開發效率.

組件庫設計思路

組件是對一些具有相同業務場景和交互模式、交互流程代碼的抽象，組件庫首先應該保證各個組件的視覺風格和交互規范保持一致。組件庫的 props 定義需要具備足夠的可擴展性，對外提供組件內部的控制權，使組件內部完全受控。支持通過 children 自定義內部結構，預定義組件交互狀態。保持組件具有統一的輸入和輸出，完整的API.

組件庫的開發我們需要考慮：

組件設計思路、需要解決的場景

組件代碼規范

組件測試

組件維護，包括迭代、issue、文檔、發布機制

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

使用到的基礎技術

vue cil 3

npm

webpack

rollup（v1.2.2）

Demo

下面就手把手搭建一個前端偏業務性的組件庫。

組件庫包括：

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

pay 組件： 一個封裝用于實現商品支付的模塊

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

只拋出一個栗子，組件內部實現略~

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

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

從簡單的開始~

創建一個空項目

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

經過vue cil3初始化后的qw-ui目錄：

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

此時為了方便組件庫的代碼管理，將目錄結構修改為：

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

目錄結構可以更具需要調整.

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

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

使 Demo 可訪問，實現對 src目錄的編譯處理；

提供對 package的編譯、構建處理

做以下兩處修改：

修改項目的入口

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 是我們后來新增的一個目錄，默認是不被 webpack 處理的，所以需要通過添加配置對該目錄的編譯支持。

新增編譯處理目錄，需要通過webpack的鏈式操作chainWebpack函數實現：

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;
            });
    }
}

執行 npm run vue-cli-service serve , 實現對Demo的訪問.

創建一個 message組件

創建組件

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

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

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

示例代碼：

message/index.js 對外提供應用

// 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 就是組件的標簽，如：

packages/message目錄結構如下：

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

導出 packages 組件庫

修改 /packages/index.js 文件，整合所有組件，并對整個組件庫進行導出：

// 導入組件
import hello from "./hello"

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

// 定義 install 方法，接收 Vue 作為參數。如果使用 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 {
  // 導出的對象必須具有 install，才能被 Vue.use() 方法安裝
  install,
  // 以下是具體的組件列表
  hello
}

到此，構建組件庫的環境準好好了

?

### 4、發布組件庫到 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) 來打包第三方庫的開發，packages 的編譯打包需要使用庫模式

--target: 構建目標，默認為應用模式。這里修改為 lib 啟用庫模式。

--dest : 輸出目錄，默認 dist。這里我們改成 lib

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

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

配置好了后，執行編譯命令:

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 官網搜索名字。

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

description: 描述。

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

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

author：作者

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

license： 開源協議

參考配置：

{
  "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 文件

發布時，只有編譯后的 lib 目錄、package.json、README.md才需要被發布。所以通過配置.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*

發布到 npm

首先需要在 npm 官網上注冊一個賬號，通過 npm adduser 命令創建一個賬戶，或者在 npm 官網注冊

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

npm login

執行發布命令，發布到 npm

npm publish

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

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

?

### 5.使用組件庫

安裝發布的組件庫：

npm i qw-ui

使用組件：

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

# 在組件中使用

完！