# 一、背景

隨著vivo悟空活動中臺活動元件越來越多，活動中臺開發的小夥伴們愈發的感知到我們缺少一個可以沉澱通用能力，提升程式碼複用性的元件庫。在這個目標基礎之上誕生了acitivity-components，但是隨著元件的抽離增多，在和上下游溝通時，發現公共元件對於運營、產品、測試同學來說都是黑盒，只有開發自己知道沉澱了哪些能力，業務上哪些模組進行了抽取。同時，在對外賦能時，也缺少了一個平臺呈現我們抽離的元件，基於此目標，開發小夥伴們開始構思外掛管理平臺的開發計劃。

# 二、平臺架構

## 2.1 技術選型

在平臺開發之初經過小夥伴們一起溝通確定了Midway+Vue+MySQL技術棧，並完成對應的架構梳理，在做Node層框架選型時，我們選擇了Midway做為Node層的開發框架，原因主要有以下幾點：

-   基於egg.js -- Midway可以很好的相容egg.js的外掛生態。

-   依賴注入（loC）-- loC全名叫做控制反轉（Inversion of Control，縮寫為loC），是物件導向的一種設計模式，可以用來降低程式碼之間的耦合度，實現了高內聚，弱耦合的架構目標。

-   更好的Typescript支援 -- 因為Midway使用的ts開發，所以在專案開發過程中，我們可以直接使用ts，利用ts的靜態型別檢查、裝飾器等能力，提升我們的程式碼健壯性和開發效率。

## 2.2 架構拆解

首先我們來看一下外掛管理平臺的架構圖：

![](https://static001.geekbang.org/infoq/15/159e7d689ebe83f6675f77df459b7b14.png)

透過對平臺整體架構圖的梳理，構建了整個平臺開發的基本思路：

-   **元件抽離** \-\- 從建站的元件在往下一層，抽取更基礎的元件內容，並集中託管至activity-components。

-   **md生成** \-\- 所有的元件都需要對外輸出，activity-components內需要做一層編譯操作，每個元件需要自動化生成對應的md文件。

-   **gitlab hooks** \-\- 如何保證server端對activity-components的變更都能及時響應，保證元件都是最新的，此處使用了gitlab整合中的push events監聽元件的push操作。

-   **npm遠端載入** \-\- 平臺需要具備遠端拉取npm包能力，並解壓縮對應的包，將activity-components原始檔獲取到。

-   **Vue全家桶使用** \-\- 平臺web端引入Vue全家桶，利用動態路由對各個元件進行匹配。

-   **單元件預覽** \-\- 抽離的元件底層存在對建站能力的依賴，此處需要將建站的編輯頁進行拆解，整合建站底層能力，完成對activity-components的元件預覽。

-   **檔案服務** \-\- 具備公共元件策劃文件的上傳能力，方便運營和產品對公共元件的接入。

# 三、重點技術詳解

在平臺的整體搭建開發過程中，梳理了以下技術點內容，進行重點介紹。

## 3.1 元件抽離

首先可以看一下activity-components元件庫package.json內容：

```java
{
  "name": "@wukong/activity-components",
  "version": "1.0.6",
  "description": "活動公共元件庫",
  "scripts": {
     "map": "node ./tool/map-components.js",
      "doc": "node ./tool/create-doc.js",
      "prepublish": "npm run map && npm run doc"
    }
  }
```

透過scripts裡面配置的指令，可以看到，在元件做publish操作時，我們利用了npm的pre事件鉤子，完成元件自身的第一層編譯操作，map-components主要用於實現對元件的檔案目錄進行遍歷，匯出所有的元件內容。

檔案目錄結構如下：

map-components主要實現對檔案目錄的遍歷操作；

```java
// 深度遍歷目錄
const deepMapDir = (rootPath, name, cb) => {
  const list = fse.readdirSync(rootPath)
  list.forEach((targetPath) => {
    const fullPath = path.join(rootPath, targetPath)
    // 解析資料夾
    const stat = fse.lstatSync(fullPath)
    if (stat.isDirectory()) {
      // 如果是資料夾，則繼續向下遍歷
      deepMapDir(fullPath, targetPath, cb)
    } else if (targetPath === 'index.vue') {
      // 如果是檔案
      if (typeof cb === 'function') {
        cb(rootPath, path.relative('./src', fullPath), name)
      }
    }
  })
}
***
***
***
// 拼接檔案內容
const file = `
${components.map(c => `export { default as ${c.name} } from './${c.path}'`).join('\n')}
`
// 檔案輸出
try {
  fse.outputFile(path.join(__dirname, '..', pkgJson.main), file)
} catch (e) {
  console.log(e)
}
```

在做檔案遍歷時，我們採用了遞迴函式，保證我們對當前的檔案目錄做到徹底遍歷，將所有的元件全部找出，透過這段程式碼，可以看到，定義的元件需要有一個index.vue元件作為檢索的入口檔案，找尋到這個元件之後，我們就會停止向下尋找，並將當前的元件目錄解析出來，具體流程如下圖。

![](https://static001.geekbang.org/infoq/29/291948ade5e8c7d188deb135d89eda37.png)

匯出檔案內容如下：

```java
export { default as CommonDialog } from './base-components/CommonDialog/index.vue'
export { default as Login } from './base-components/Login/index.vue'
export { default as ScrollReach } from './base-components/ScrollReach/index.vue'
export { default as Test } from './base-components/Test/index.vue'
***
```

透過上述一系列操作，統一對外的目錄檔案生成，元件抽離只需要正常往元件庫新增即可。

## 3.2 Markdown檔案自動化生成

生成了元件目錄之後，對應的元件說明文件該如何生成呢，此處我們引用同中心另一位同事馮鏑同學開發的[vue-doc (opens new window)](https://mp.weixin.qq.com/s?__biz=MzI4NjY4MTU5Nw==&mid=2247491367&idx=2&sn=184b48330e598ab4be2d462823ec17a9&scene=21#wechat_redirect)，完成對應Vue元件md文件自動化生成，首先來看一下定義的doc指令。

```java
 "doc": "node ./tool/create-doc.js"
 ***
 
 create-doc.js
 
 const { singleVueDocSync } = require('@vivo/vue-doc')
 const outputPath = path.join(__dirname, '..', 'doc', mdPath)
 singleVueDocSync(path.join(fullPath, 'index.vue'), {
    outputType: 'md',
    outputPath
  })
```

透過Vue-doc暴露的singleVueDocSync方法，在server端根目錄下會新建一個doc資料夾，這裡面會根據元件的目錄結構生成對應的元件md文件，此時doc的目錄結構為：

```
|-doc
|--base-components
|---CommonDialog
|----index.md
|---***
|--wap-components
|---ConfirmDialog
|----index.md
|---***
|--web-components
|---WinnerList
|----index.md
|---***
|-src
|--**
```

透過這個檔案目錄可以看到，根據元件庫的目錄結構，在doc資料夾下生成同樣目錄結構的md檔案，至此每個元件的md文件都已經生成了，但是隻到這一步是不夠的。

我們還需要將當前的md文件進行整合，透過一個json檔案表述出來，因為外掛管理平臺是需要解析到這個json檔案並將其做為返回內容至web端，完成前端頁面的渲染，基於此目標我們寫了以下程式碼：

```java
const cheerio = require('cheerio')
const marked = require('marked')
const info = {
  timestamp: Date.now(),
  list: []
}
***
let cname = cheerio.load(marked(fse.readFileSync(outputPath).toString()))
  info.list.push({
    name,
    md: marked(fse.readFileSync(outputPath).toString()),
    fullPath: convertPath(outputPath),
    path: convertPath(path.join('doc', mdPath)),
    cname: cname('p').text()
 })
 ***
 // 生成對應的元件資料檔案
fse.writeJsonSync(path.resolve('./doc/data.json'), info, {
  spaces: 2
})
```

這裡引入兩個比較重要的庫一個是cheerio，一個是marked 。cheerio是jquery核心功能的一個快速靈活而又簡潔的實現，主要是為了用在伺服器端需要對DOM進行操作的地方，marked主要是將md文件轉換為html的文件格式，完成上述程式碼編寫之後，我們在doc目錄下生成一個data.json檔案，具體內容如下：

```java
{
  "timestamp": 1628846618611,
  "list": [
    {
      "name": "CommonDialog",
      "md": "<h1 id="\"commondialog\"">CommonDialog</h1>\n<h3 id="\"元件介紹\"">元件介紹</h3>\n<blockquote>\n<p>通用基礎彈框</p>\n</blockquote>\n<h2 id="\"屬性-attributes\"">屬性-Attributes</h2>\n<table>\n<thead>\n<tr>\n<th align="\"center\"">引數</th>\n<th align="\"center\"">說明</th>\n<th align="\"center\"">型別</th>\n<th align="\"center\"">預設值</th>\n<th align="\"center\"">必須</th>\n<th align="\"center\"">sync</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align="\"center\"">maskZIndex</td>\n<td align="\"center\"">彈框的z-index層級</td>\n<td align="\"center\"">Number</td>\n<td align="\"center\"">1000</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">bgStyle</td>\n<td align="\"center\"">背景樣式</td>\n<td align="\"center\"">Object</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">closeBtnPos</td>\n<td align="\"center\"">關閉按鈕的位置</td>\n<td align="\"center\"">String</td>\n<td align="\"center\"">top-right</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">showCloseBtn</td>\n<td align="\"center\"">是否展示關閉按鈕</td>\n<td align="\"center\"">Boolean</td>\n<td align="\"center\"">true</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">v-model</td>\n<td align="\"center\"">是否展示彈框</td>\n<td align="\"center\"">Boolean</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n</tbody></table>\n<h2 id="\"事件-events\"">事件-Events</h2>\n<table>\n<thead>\n<tr>\n<th align="\"center\"">事件名</th>\n<th align="\"center\"">說明</th>\n<th align="\"center\"">引數</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align="\"center\"">input</td>\n<td align="\"center\"">-</td>\n<td align="\"center\""></td>\n</tr>\n<tr>\n<td align="\"center\"">close</td>\n<td align="\"center\"">彈框關閉事件</td>\n<td align="\"center\""></td>\n</tr>\n</tbody></table>\n<h2 id="\"插槽-slots\"">插槽-Slots</h2>\n<table>\n<thead>\n<tr>\n<th align="\"center\"">名稱</th>\n<th align="\"center\"">說明</th>\n<th align="\"center\"">scope</th>\n<th align="\"center\"">content</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align="\"center\"">default</td>\n<td align="\"center\"">彈框內容</td>\n<td align="\"center\""></td>\n<td align="\"center\"">-</td>\n</tr>\n</tbody></table>\n",
      "fullPath": "/F/我的專案/公共元件/activity-components/doc/base-components/CommonDialog/index.md",
      "path": "doc/base-components/CommonDialog/index.md",
      "cname": "通用基礎彈框"
    }, {
      "name": "ConfirmDialog",
      "md": "<h1 id="\"confirmdialog\"">ConfirmDialog</h1>\n<h3 id="\"元件介紹\"">元件介紹</h3>\n<blockquote>\n<p>確認彈框</p>\n</blockquote>\n<h2 id="\"屬性-attributes\"">屬性-Attributes</h2>\n<table>\n<thead>\n<tr>\n<th align="\"center\"">引數</th>\n<th align="\"center\"">說明</th>\n<th align="\"center\"">型別</th>\n<th align="\"center\"">預設值</th>\n<th align="\"center\"">必須</th>\n<th align="\"center\"">sync</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align="\"center\"">bgStyle</td>\n<td align="\"center\"">背景樣式</td>\n<td align="\"center\"">Object</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">maskZIndex</td>\n<td align="\"center\"">彈框層級</td>\n<td align="\"center\"">Number</td>\n<td align="\"center\"">1000</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">v-model</td>\n<td align="\"center\"">彈框展示狀態</td>\n<td align="\"center\"">Boolean</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">title</td>\n<td align="\"center\"">彈框標題文案</td>\n<td align="\"center\"">String</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">titleColor</td>\n<td align="\"center\"">標題顏色</td>\n<td align="\"center\"">String</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">leftTitle</td>\n<td align="\"center\"">左按鈕文案</td>\n<td align="\"center\"">String</td>\n<td align="\"center\"">取消</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">rightTitle</td>\n<td align="\"center\"">右按鈕文案</td>\n<td align="\"center\"">String</td>\n<td align="\"center\"">確定</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">leftBtnStyle</td>\n<td align="\"center\"">左按鈕樣式</td>\n<td align="\"center\"">Object</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">rightBtnStyle</td>\n<td align="\"center\"">右按鈕樣式</td>\n<td align="\"center\"">Object</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n</tbody></table>\n<h2 id="\"事件-events\"">事件-Events</h2>\n<table>\n<thead>\n<tr>\n<th align="\"center\"">事件名</th>\n<th align="\"center\"">說明</th>\n<th align="\"center\"">引數</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align="\"center\"">cancel</td>\n<td align="\"center\"">左按鈕點選觸發</td>\n<td align="\"center\""></td>\n</tr>\n<tr>\n<td align="\"center\"">confirm</td>\n<td align="\"center\"">右按鈕點選觸發</td>\n<td align="\"center\""></td>\n</tr>\n<tr>\n<td align="\"center\"">close</td>\n<td align="\"center\"">彈框關閉事件</td>\n<td align="\"center\""></td>\n</tr>\n<tr>\n<td align="\"center\"">input</td>\n<td align="\"center\"">-</td>\n<td align="\"center\""></td>\n</tr>\n</tbody></table>\n",
      "fullPath": "/F/我的專案/公共元件/activity-components/doc/wap-components/ConfirmDialog/index.md",
      "path": "doc/wap-components/ConfirmDialog/index.md",
      "cname": "確認彈框"
    }, {
      "name": "WinnerList",
      "md": "<h1 id="\"winnerlist\"">WinnerList</h1>\n<h3 id="\"元件介紹\"">元件介紹</h3>\n<blockquote>\n<p>中獎列表</p>\n</blockquote>\n<h2 id="\"屬性-attributes\"">屬性-Attributes</h2>\n<table>\n<thead>\n<tr>\n<th align="\"center\"">引數</th>\n<th align="\"center\"">說明</th>\n<th align="\"center\"">型別</th>\n<th align="\"center\"">預設值</th>\n<th align="\"center\"">必須</th>\n<th align="\"center\"">sync</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align="\"center\"">item</td>\n<td align="\"center\"">-</td>\n<td align="\"center\""></td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">是</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">prodHost</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">String</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">是</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">prizeTypeOptions</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">Array</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">isOrder</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">Boolean</td>\n<td align="\"center\"">true</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">listUrl</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">String</td>\n<td align="\"center\"">/wukongcfg/config/activity/reward/got/list</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n<tr>\n<td align="\"center\"">exportUrl</td>\n<td align="\"center\"">-</td>\n<td align="\"center\"">String</td>\n<td align="\"center\"">/wukongcfg/config/activity/reward/export</td>\n<td align="\"center\"">否</td>\n<td align="\"center\"">否</td>\n</tr>\n</tbody></table>\n",
      "fullPath": "/F/我的專案/公共元件/activity-components/doc/web-components/WinnerList/index.md",
      "path": "doc/web-components/WinnerList/index.md",
      "cname": "中獎列表"
    }]
 }
```

至此我們就在activity-components側完成了對元件的md文件自動化生成。

![](https://static001.geekbang.org/infoq/19/197df99b6592d6d12425eaf07074feee.png)

透過這張圖我們可以清晰的抓取到底層元件中的關鍵資訊，例如：元件支援的屬性和事件。

## 3.3 gitlab hooks

在平臺開發的過程中，元件每次做gitlab提交時，平臺是無法感知元件庫的程式碼發生了變化，於是我們開始調研，在對gitlab的api進行搜尋時，發現gitlab已經提供了整合的解決方案。

![](https://static001.geekbang.org/infoq/9d/9daffdd65a1a89694ad11624c28a1eb0.png)

在完成對應url和secret Token配置之後，點選save changes會生成如下圖所示內容：

![](https://static001.geekbang.org/infoq/9b/9b235e9ce95433dc755b5e808929523a.png)

此時已經完成基本的push events配置，接下來需要在外掛管理平臺server端完成對應的介面開發。

```java
@provide()
@controller('/api/gitlab')
export class GitlabController {
  @inject()
  ctx: Context;
  @post('/push')
  async push(): Promise<void> {
    try {
      const event = this.ctx.headers['x-gitlab-event'];
      const token = this.ctx.headers['x-gitlab-token'];
      // 判斷token是否正確
      if (token === this.ctx.app.config.gitlab.token) {
        switch (event) {
          case 'Push Hook':
            // do something
            const name = 'activity-components';
            const npmInfo = await this.ctx.service.activity.getNpmInfo(`@wukong/${name}`);
            await this.ctx.service.activity.getPkg(name, npmInfo.data.latest.version);
            break;
        }
      }
      this.ctx.body = {
        code: ErrorCode.success,
        success: true,
        msg: Message.success
      } as IRes;
    } catch (e) {
      this.ctx.body = {
        code: ErrorCode.fail,
        success: false,
        msg: e.toString()
      } as IRes;
    }
  }
}
```

透過這段程式碼可以發現 ：

-   首先我們使用了@controller宣告這個類為控制器類，同時使用了@post定義了請求方式；

-   透過@inject()去容器中取出對應的例項注入到當前屬性中；

-   透過@provide()定義當前的物件需要被繫結到對應容器中。

這段程式碼可以明顯感受loC機制給開發帶來的便利性，當我們想要使用某個例項時，容器會自動將物件例項化交給使用者，使得我們的程式碼具備很好的解耦性。

上述程式碼中還做了request解析，當請求頭裡的gitlab-token為定義的activity-components，就會繼續往後執行後續邏輯，這裡ctx.headers寫法其實就是引用了koa的context.request.headers的簡寫，透過token驗證，保證了只有元件庫程式碼提交時才會觸發。

## 3.4 npm包遠端拉取+解壓縮

當完成gitlab hooks監聽後，如何實現從npm私服拉取對應的元件庫，並將裡面的內容解析出來呢，此處透過查閱npm私服的指令，發現可以透過npm view \[/\]\[@\] \[\[.\]...\]來查詢當前的私服託管的npm包具體資訊，基於此，我們在本地的終端檢索了下@wukong/activity-components包的資訊，得到如下資訊：

```java
npm view @wukong/activity-components
***
 {
   host: 'wk-site-npm-test.vivo.xyz',
   pathname: '/@wukong%2factivity-components',
   path: '/@wukong%2factivity-components',
   ***
   dist:{
     "integrity": "sha512-aaJssqDQfSmwQ1Gonp5FnNvD6TBXZWqsSns3zAncmN97+G9i0QId28KnGWtGe9JugXxhC54AwoT88O2HYCYuHg==",
    "shasum": "ff09a0554d66e837697f896c37688662327e4105",
    "tarball": "http://wk-****-npm-test.vivo.xyz/@wukong%2factivity-components/-/activity-components-1.0.0.tgz"
   }，
   ***
}
```

分析npm view的返回資訊，抓到npm包的源地址:dist.tarball:\[http://****.xyz/@wukongactivity-components-1.0.0.tgz\]，透過這個地址可以直接將對應的tgz原始檔下載到本地。

但是這個地址並不能徹底解決掉問題，因為隨著公共元件庫的不斷迭代，npm包的版本是在不斷變化的，如何才能獲取到npm包的版本呢?帶著這個問題，我們去了npm私服network抓到一個介面:\[http://****.xyz/-/verdaccio/sidebar/@wukong/activity-components\]；透過查詢這個介面的返回，得到了以下資訊：

![](https://static001.geekbang.org/infoq/3c/3c127618e1d6299ff72c53f6aecf08c7.png)

介面返回可以看到latest.version返回了最新的版本資訊，透過這兩個介面，就可以在Node層直接下載到最新的元件庫，接下來看下外掛管理平臺側的程式碼：

```java
service/activity.ts
***
// 包存放的根目錄，所有的外掛載入後統一放在這裡
const rootPath = path.resolve('temp');
  /**
   * 獲取某個外掛的最新版本
   * @param {string} fullName 外掛全名（帶字首：@wukong/wk-api）
   */
  async getNpmInfo(fullName) {
    const { registry } = this.ctx.service.activity;
    // 遠端獲取@wukong/activity-components的最新版本資訊
    const npmInfo = await this.ctx.curl(`${registry}/-/verdaccio/sidebar/${fullName}`, {
      dataType: 'json',
    });

if (npmInfo.status !== 200) {
      throw new Error(`[error]: 獲取${fullName}版本資訊失敗`);
    }
    return npmInfo;
  }
    /**
   * 遠端下載npm包
   * @param {string} name 外掛名（不帶字首：activity-components） 
   * @param {string} tgzName `${name}-${version}.tgz`;
   * @param {string} tgzPath  path.join(rootPath, name, tgzName);
   */
async download(name,tgzName,tgzPath){
 const pkgName = `@wukong/${name}`;
    const pathname = path.join(rootPath, name);
    // 遠端下載檔案
    const response = await this.ctx.curl(`${this.registry}/${pkgName}/-/${tgzName}`);
    if (response.status !== 200) {
      throw new Error(`download ${tgzName}載入失敗`);
    }
    // 確定資料夾是否存在
    fse.existsSync(pathname);
    // 清空資料夾
    fse.emptyDirSync(pathname);
    await new Promise((resolve, reject) => {
      const stream = fse.createWriteStream(tgzPath);
      stream.write(response.data, (err) => {
        err ? reject(err) : resolve();
      });
    });
}
```

getNpmInfo方法主要是獲取元件的版本資訊，download主要是元件的下載操作，最後完成對應的流檔案注入，這兩個方法執行完畢之後，我們會生成以下的目錄結構：

在temp檔案下獲取到了元件庫的壓縮包，但是到這一步是不夠的，我們需要解壓縮這個壓縮包，並且要獲取到對應的原始碼。帶著這個問題，找到一個targz的npm包，首先看下官方給的demo：

```java
var targz = require('targz');
// decompress files from tar.gz archive
targz.decompress({
    src: 'path_to_compressed file',
    dest: 'path_to_extract'
}, function(err){
    if(err) {
        console.log(err);
    } else {
        console.log("Done!");
    }
});
```

官方暴露的decomporess方法即可完成targz包的解壓縮，得到對應的元件庫原始碼，對於壓縮包，我們使用fs的remove方法移除即可：

```java
|-server
|--src
|---app
|----controller
|----***
|--temp
|---activity-components
|----doc
|----src
|----tool
|----****
```

到這一步我們就完成了整體的npm包拉取和解壓縮操作，獲取到了元件庫的原始碼，此時我們需要讀取到原始碼中doc透過3.2步驟生成的json檔案，並將json內容返回給web側。

## 3.5 ast轉譯

**背景**：在對建站平臺的基礎元件庫wk-base-ui引入時，由於元件庫的index.js不是自動生成的，裡面會出現冗餘程式碼以及註釋的情況，這樣會導致外掛管理平臺根據入口檔案無法精準的獲取到所有的元件地址，為了解決這個問題，我們使用@babel/parser、@babel/traverse解析wk-base-ui元件庫的入口檔案。

**思路**：找到元件庫npm包入口檔案，根據入口檔案中的export語句，找到元件庫中每個Vue元件的路徑，並置換成相對npm包根目錄的地址。

元件庫的一般組織形式:

形式1：（activity-components為例）

package.json中有main指定入口：

```java
// @wukong/activity-components/package.json
{
    "name": "@wukong/activity-components",
    "description": "活動公共元件庫",
    "version": "1.0.6",
    "main": "src/main.js", // main 指定npm包入口
    ...
}
```

入口檔案：

```java
// src/main.js
export { default as CommonDialog } from './base-components/CommonDialog/index.vue'
export { default as Login } from './base-components/Login/index.vue'
export { default as ScrollReach } from './base-components/ScrollReach/index.vue'
...
```

形式2：（wk-base-ui為例）package.json中無main指定入口，根目錄下入口檔案為index.js：

```java
// @wukong/wk-base-ui/index.js
export { default as inputSlider } from './base/InputSlider.vue'
export { default as inputNumber } from './base/InputNumber.vue'
export { default as inputText } from './base/InputText.vue'
/*export { default as colorGroup } from './base/colorGroup.vue'*/
...
```

以上兩種形式最終都指向形如export {default as xxx } from './xxx/../xxx.vue'的檔案。為了從入口js檔案中準確找到export元件名和檔案路徑，這裡使用利用@babel/parser和@babel/traverse來解析，如下：

```java
// documnet.ts

// 透過@babel/parser解析入口js檔案內容exportData得到抽象語法樹ast
const ast = parse(exportData, {
  sourceType: 'module',
});

const pathList: any[] = [];

// 透過@babel/traverse遍歷ast，得到每條export語句中的元件名name和對應的vue檔案路徑
traverse(ast, {
  ExportSpecifier: {
    enter(path, state) {
      console.log('start processing ExportSpecifier!');
      // do something
      pathList.push({
        path: path.parent.source.value, // 元件匯出路徑 eg: from './xxx/../xxx.vue' 這裡的./xxx/../xxx.vue
        name: path.node.exported.name, // 元件匯出名 eg: export { default as xxx} 這裡的xxx
      });
    },
    exit(path, state) {
      console.log('end processing ExportSpecifier!');
      // do something
    },
  },
});
```

這裡最終得到的pathList如下：

```java
[
  { name: "inputSlider", path: "./base/InputSlider.vue" },
  { name: "inputNumber", path: "./base/InputNumber.vue" },
  { name: "inputText", path: "./base/InputText.vue" },
  ...
]
```

後續再遍歷pathList陣列，利用@vivo/vue-doc的singleVueDocSync解析出每個元件的md文件，完成對元件庫的文件解析工作。程式碼示例如下：

```java
pathList.forEach((item) => {
  const vuePath = path.join(jsDirname, item.path); // 輸入路徑
  const mdPath = path.join(outputDir, item.path).replace(/\.vue$/, '.md');// 輸出路徑
  try {
    singleVueDocSync(vuePath, {
      outputType: 'md', // 輸入型別 md
      outputPath: mdPath, // 輸出路徑
    });
    // ...省略
  } catch (error) {
    // todo 如果遇到@vivo/vue-doc處理不了的元件，暫時跳過。（或者生成一個空的md檔案）
  }
});
```

最終效果如下圖，在專案目錄下生成doc資料夾：

![](https://static001.geekbang.org/infoq/43/435dc90e56812a650e02d84cf17f0f9a.png)

至此，完成了解析元件庫並生成對應md文件的全部流程。

最後我們可以看一下平臺實現的效果：

![](https://static001.geekbang.org/infoq/ac/acc832db14ea5a428ceb59b7672276fe.gif)

# 四、小結

## 4.1思考過程

在做建站的元件開發過程中，首先構思公共元件庫，解決開發之間元件沉澱的問題，隨著元件增多，發現產品和運營對於沉澱的公共元件也有訴求，對於此開始了外掛管理平臺的架構設計，解決公共元件對產品的黑盒問題，同時也可以很好的賦能悟空活動中臺生態，對於別的業務方也可以快速的接入vivo悟空活動中臺元件，提升自身的開發效率。

## 4.2 現狀和未來計劃

目前一共抽離了公共元件26個，累計覆蓋建站元件超過12個，接入的業務方2個，累計提升人效大於20人天。但是還是不夠的，後續我們需要完成元件的自動化測試，繼續豐富元件庫，增加動效區域，更好的賦能上下游。

> 作者：vivo網際網路前端團隊-Fang Liangliang</void>

【營】在開局，提升【豹】發力 - vivo活動外掛管理平臺

相關文章