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 按鈕',步驟如下：
- 創建的新組件添加至組件清單
components.json中， - 主題樣式入口檔案
packages/theme-chalk/src/index.scss添加組件匯入陳述句， - 在
types/element-ui.d.ts自動引入新組件型別宣告， - 創建 package :
創建組件檔案packages/button/index.jspackages/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 - 更新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組件庫匯總
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285938.html
標籤：JavaScript
上一篇：陣列扁平化的幾種方式