07.ElementUI 2.X 源碼學習:源碼剖析之工程化(二)

0x.00 📢 前言

👇 項目工程化系列文章鏈接如下，推薦按照順序閱讀文章 👇。

1️⃣ 源碼剖析之工程化(一)：項目概覽、package.json、npm script
2️⃣ 源碼剖析之工程化(二)：項目構建、MD解析
3️⃣ 源碼剖析之工程化(三)：打包配置

前文對項目目錄結構、package.json、npm script各命令任務內容和執行過程進行了概述。書接上文，build 目錄下定義了許多項目構建腳本和配置（開發，打包，部署，持續集成）。 npm script各命令作為入口，會調用 build 目錄中文件,從而自動完成大量重復性工作，從而減少人為錯誤、提高效率。

下面將繼續深入研究工程化流程,對命令中調用的腳本配置逐一分析。

0x.01 📃 components.json

components.json是一份項目完整的組件清單，列出了組件的名稱、文件路徑，在項目文件構建、 webpack 等多處用到。

components.json文件不是自動生成的，但其清單內容是自動更新的。當使用 make命令創建新組件 package make new <component-name> [中文名] 時自動更新組件清單，具體實現詳見下文 build/bin/new.js 功能詳解。

0x.02 🔧 項目構建 build/bin

build/bin/build-entry.js

生成組件庫入口文件src/index.js。基於組件清單文件components.json結合字符串模版庫json-templater/string自動生成 。當組件清單變更時勿需手動更新文件，只要運行該文件自動生成最新文件覆蓋更新。

build/bin/build-locale.js

通過 babel 處理 src/locale/lang 目錄下的翻譯文件，生成 umd 格式文件，輸出至 lib/umd/locale 目錄下。

build/bin/gen-cssfile.js

生成 packages/theme-chalk/index.scss 樣式總入口文件。全量引入組件時，引用改樣式如下 import 'packages/theme-chalk/src/index.scss' 。

build/bin/gen-indices.js

使用 algoliasearch 輕松實現文檔全站搜索。

以button頁面為例，提取后的頁面索引內容如下 👇。

build/bin/i18n.js

用於項目官網的國際化。基於 examples/i18n/page.json 國際化配置和 examples/pages/template 目錄下的所有模版文件，生成 zh-CN、en-US、es、fr-FR等四種語言的.vue文件。

build/bin/iconInit.js

使用 postcss 解析 icon.scss，提取所有 icon 名字生成 examples/icon.json 文件。

icon.json 在官網入口文件examples\entry.js 中導入，掛載到 Vue.prototype。 用於Icon圖標文檔頁生成所有的圖標集合，詳見下圖 👇。

import icon from './icon.json';
Vue.prototype.$icon = icon; // Icon 列表頁用 

build/bin/new-lang.js

為網站添加新語言。例如 'make new-lang fr' ，添加新語言配置至 components.json、page.json、route.json、nav.config.json等文件中，配置默認復制en-US語言設置，新建對應文件夾 examples/docs/fr。

build/bin/new.js

創建新組件 package，自動創建組件相關文件和初始組件的全局配置信息。 例如 'make new button 按鈕',步驟如下：

1. 創建的新組件添加至組件清單components.json中。
2. 主題樣式入口文件packages/theme-chalk/src/index.scss添加組件導入語句。
3. 在 types/element-ui.d.ts 自動引入新組件類型聲明。
4. 創建 package :
   創建組件文件 packages/button/index.js packages/button/src/main.vue
   創建多語言組件文檔 examples/docs/{lang}/button.md
   創建單元測試文件 test/unit/specs/button.spec.js
   創建組件樣式文件 packages/theme-chalk/src/button.scss
   創建組件類型聲明文件 types/button.d.ts
5. 更新nav.config.json，添加新組件導航信息（組件菜單下左側的二級導航）

🚨 若項目網站增加了新了語言，需要在Files 數組添加配置硬編碼指定語言。

build/bin/template.js

用於監聽examples/pages/template目錄下模板文件是否發生改變，若存在變化會自動執行命令npm run i18n，運行文件build/bin/i18n.js，重新生成網站文件。

build/bin/version.js

生成 examples/version.json 記錄項目庫版本信息。

process.env.VERSION 參數的是怎么傳入的？

當執行命令 npm run pub 發布組件庫時，會執行腳本 build/release.sh，會手動輸入發布本信息(read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r),然后執行命令 VERSION=$VERSION npm run dist。

整個執行順序 👉 npm run pub=>sh build/release.sh=>輸入$VERSION=>VERSION=$VERSION npm run dist=> npm run build:file=> node build/bin/version.js 。

用於網站版頭部導航版本切換👇。

0x.03 🔄 .MD解析轉換 build/md-loader

webpack 使用自定義的 markdown-loder對文件進行處理，將 組件文檔.md 編譯為 HTML。已在前文 04.封裝組件封裝、編寫說明文檔 中詳細說明,不再過多贅述。

---

👋👋 受制於篇幅的問題，本文到此就結束了！后續文章將會繼續分析學習工程化實踐。

0x.04 🔖 鏈接匯總

點擊以下鏈接，可以快速查看本系列其他文章：

ElementUI源碼學習:從零開始搭建Vue組件庫匯總