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

Anduril發表於2021-06-07

0x.00 ? 前言

? 專案工程化系列文章連結如下,推薦按照順序閱讀文章 ?。

1️⃣ 原始碼剖析之工程化(一):專案概覽、package.json、npm script
2️⃣ 原始碼剖析之工程化(二):專案構建、MD解析
3️⃣ 原始碼剖析之工程化(三):打包配置

前文對專案目錄結構、package.jsonnpm script各命令任務內容和執行過程進行了概述。書接上文,build 目錄下定義了許多專案構建指令碼和配置(開發,打包,部署,持續整合)。 npm script各命令作為入口,會呼叫 build 目錄中檔案,從而自動完成大量重複性工作,從而減少人為錯誤、提高效率。

下面將繼續深入研究工程化流程,對命令中呼叫的指令碼配置逐一分析。

0x.01 ? components.json

components.json是一份專案完整的元件清單,列出了元件的名稱、檔案路徑,在專案檔案構建、 webpack 等多處用到。

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

image.png

0x.02 ? 專案構建 build/bin

build/bin/build-entry.js

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

carbon (30).png

build/bin/build-locale.js

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

carbon (31).png

build/bin/gen-cssfile.js

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

image.png

build/bin/gen-indices.js

使用 algoliasearch 輕鬆實現文件全站搜尋。

image.png

button頁面為例,提取後的頁面索引內容如下 ?。

image.png

build/bin/i18n.js

用於專案官網的國際化。基於 examples/i18n/page.json 國際化配置和 examples/pages/template 目錄下的所有模版檔案,生成 zh-CNen-USesfr-FR等四種語言的.vue檔案。

carbon (86).png

build/bin/iconInit.js

使用 postcss 解析 icon.scss,提取所有 icon 名字生成 examples/icon.json 檔案。

carbon (32).png

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

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

image.png

build/bin/new-lang.js

為網站新增新語言。例如 'make new-lang fr' ,新增新語言配置至 components.jsonpage.jsonroute.jsonnav.config.json等檔案中,配置預設複製en-US語言設定,新建對應資料夾 examples/docs/fr

carbon (33).png

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,新增新元件導航資訊(元件選單下左側的二級導航)

image.png

? 若專案網站增加了新了語言,需要在Files 陣列新增配置硬編碼指定語言。

image.png

build/bin/template.js

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

image.png

build/bin/version.js

生成 examples/version.json 記錄專案庫版本資訊。

image.png

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

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

image.png

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

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


?? 受制於篇幅的問題,本文到此就結束了!後續文章將會繼續分析學習工程化實踐。

0x.04 ? 連結彙總

點選以下連結,可以快速檢視本系列其他文章:

ElementUI原始碼學習:從零開始搭建Vue元件庫彙總

相關文章