基于 Vue CLI 搭建腳手架。
本文作者：阿商、周澤斌、高智恒
腳手架的目標(biāo)
統(tǒng)一化：統(tǒng)一模塊輸入輸出
能夠快速生成適用于自身的新項(xiàng)目的目錄模板（項(xiàng)目腳手架）。
提升開發(fā)效率，減少相同功能的組件重復(fù)開發(fā)（模塊腳手架）。
標(biāo)準(zhǔn)化：建立模型標(biāo)準(zhǔn)，統(tǒng)一認(rèn)知
多個(gè)Team實(shí)現(xiàn)統(tǒng)一的標(biāo)準(zhǔn)化，降低因不同的項(xiàng)目規(guī)范和標(biāo)準(zhǔn)帶來(lái)的理解成本。
自動(dòng)化：減少人員參與減少成本，提高交付效率
提高項(xiàng)目的構(gòu)建效率，減少打包依賴。
腳手架的搭建
團(tuán)隊(duì)目前技術(shù)棧主要使用 Vue ，所以腳手架也是基于 Vue CLI 的基礎(chǔ)上搭建的。
Vue CLI 官方文檔：https://cli.vuejs.org/zh/guide/installation.html 。
1、全局安裝 vue-cli
全局安裝完 vue-cli 后，就可以在命令行中使用 vue 命令了。熟悉 vue-cli 的小伙伴們都知道，在開啟一個(gè)新項(xiàng)目前需要使用 vue init webpack xxx 來(lái)快速生成一個(gè)模板項(xiàng)目。
但是在實(shí)際的開發(fā)過(guò)程中，我們往往會(huì)根據(jù)團(tuán)隊(duì)或者業(yè)務(wù)的需要對(duì)目錄結(jié)構(gòu)進(jìn)行調(diào)整，制定符合業(yè)務(wù)邏輯的項(xiàng)目模板。
2、創(chuàng)建自定義的項(xiàng)目目錄結(jié)構(gòu)模板
- 首先我們需要知道 vue init 都支持哪些命令參數(shù)。
可以看到，vue init -c 命令是可以支持克隆 Git 遠(yuǎn)程倉(cāng)庫(kù)代碼到本地的。
我們這里的項(xiàng)目目錄結(jié)構(gòu)主要參考了 Vue 官方的 Webpack 模版: https://github.com/vuejs-templates/webpack 。
如圖：
- 修改 template的項(xiàng)目目錄結(jié)構(gòu)，上傳到遠(yuǎn)程倉(cāng)庫(kù)。
我們只需要將 vuejs-templates/webpack 項(xiàng)目克隆到本地，然后將 template 文件夾下的目錄結(jié)構(gòu)改成我們自定義的目錄結(jié)構(gòu)，并封裝內(nèi)部通用邏輯，最后將修改完成后的代碼上傳到我們的Git 遠(yuǎn)程倉(cāng)庫(kù)。
腳手架的使用
目前團(tuán)隊(duì)基于 vue-cli 搭建了 3 種腳手架用于不同的業(yè)務(wù)場(chǎng)景：
項(xiàng)目腳手架
后臺(tái)腳手架
模塊腳手架
1、項(xiàng)目腳手架
項(xiàng)目腳手架主要是用于快速創(chuàng)建一個(gè)項(xiàng)目，內(nèi)部會(huì)包含基礎(chǔ)的 vue 和團(tuán)隊(duì)自用的一些組件，例如 edu-axios（通過(guò) galaxyDependencies 依賴引入，后續(xù)會(huì)介紹），還會(huì)集成用來(lái)依賴內(nèi)部組件的 webpack 插件，用于解析依賴關(guān)系。
2、后臺(tái)腳手架
后臺(tái)腳手架是基于項(xiàng)目腳手架的，主要是用于快速創(chuàng)建一個(gè)后臺(tái)管理系統(tǒng)項(xiàng)目（包含登錄界面、左側(cè)菜單結(jié)構(gòu)、右側(cè)對(duì)應(yīng)的內(nèi)容展示等）。
使用方式如下：
my-project 生成的目錄結(jié)構(gòu)如下：
yarn install 后，通過(guò) yarn dev 啟動(dòng)項(xiàng)目，瀏覽器自動(dòng)打開 http://localhost:9090/，呈現(xiàn)頁(yè)面如下：
- http://localhost:9090/#/login 登錄頁(yè)面
- http://localhost:9090/#/index 首頁(yè)
現(xiàn)在一個(gè)符合團(tuán)隊(duì)標(biāo)準(zhǔn)的后臺(tái)管理系統(tǒng)的項(xiàng)目目錄結(jié)構(gòu)就創(chuàng)建完成了，使用者無(wú)需關(guān)心項(xiàng)目結(jié)構(gòu)的搭建過(guò)程，只需要專心寫業(yè)務(wù)邏輯即可。
3、模塊腳手架
模塊腳手架主要是用于快速開發(fā)公共功能組件，每個(gè)公共組件都是一個(gè)單獨(dú)的項(xiàng)目。
項(xiàng)目中會(huì)集成用來(lái)依賴內(nèi)部組件的 webpack 插件，用于解析依賴關(guān)系。并且會(huì)提供 build 邏輯，用于生成復(fù)合 galaxy 依賴關(guān)系的 depends.map.json 文件和真實(shí)需要上傳的文件。
提示：通過(guò)模塊腳手架創(chuàng)建的模塊項(xiàng)目最終打包編譯生成的是符合 UMD 規(guī)范的模塊，并且在打包編譯的過(guò)程中會(huì)生成一個(gè) depends.map.json 文件（當(dāng)前項(xiàng)目的模塊依賴分析，會(huì)包含所有打包產(chǎn)物，css、js，和當(dāng)前模塊所依賴的 externals 等等），例如：
之后通過(guò) Jenkins 自動(dòng)部署的時(shí)候，Jenkins 會(huì)將 depends.map.json 和打包產(chǎn)物分別上傳到 CDN 上。
（這里只需要知道在打包編譯的過(guò)程中會(huì)生成 depends.map.json 即可，具體作用會(huì)在下文【W(wǎng)ebpack 之 externals 在腳手架中的實(shí)踐】提到）
使用方式如下：
my-component 生成的項(xiàng)目目錄結(jié)構(gòu)如下：
接下來(lái)使用者就可以專注于功能組件的封裝了，無(wú)需重復(fù)創(chuàng)建格式相同的目錄結(jié)構(gòu)。
Webpack 之 externals 在腳手架中的實(shí)踐
首先先來(lái)了解下什么是 webpack externals。
externals 的作用：防止將 import 的包在構(gòu)建的時(shí)候打包到 js 文件中，而是在運(yùn)行時(shí)再?gòu)耐獠咳カ@取這些拓展依賴。
詳細(xì)請(qǐng)看 Webpack 文檔對(duì) externals 的介紹：https://webpack.js.org/configuration/externals/ 。
而我們將我們的模塊都以 externals 的方式引入，提高了構(gòu)建的效率。
具體是如何引入的？
每個(gè)腳手架構(gòu)建的項(xiàng)目都在 package.json 中集成了 galaxyDependencies ，它是一個(gè)內(nèi)部依賴組件，項(xiàng)目構(gòu)建過(guò)程中，webpack 通過(guò)插件拿到某一個(gè)依賴對(duì)應(yīng)版本的 depends.map.json，然后異步地去請(qǐng)求拿到他并解析其依賴，插入到當(dāng)前項(xiàng)目的externals 中，后續(xù)會(huì)以 eduAxios 為例進(jìn)行介紹。
下面會(huì)介紹腳手架構(gòu)建的項(xiàng)目中具體包含了哪些代碼。
加載 galaxy.config.js
在腳手架項(xiàng)目目錄結(jié)構(gòu)（template）中會(huì)有一個(gè) galaxy.config.js 文件，里面主要是預(yù)置了一些構(gòu)建配置，代碼如下：
其中 {{ name }} 是使用腳手架在創(chuàng)建項(xiàng)目過(guò)程中動(dòng)態(tài)注入的變量，代表的是當(dāng)前項(xiàng)目名稱，如同 package.json 中一樣：
當(dāng)我們使用 vue init -c true git.lagou.com:fe-formwork/edu-component my-component 來(lái)創(chuàng)建項(xiàng)目的時(shí)候，在命令行會(huì)提示我們輸入當(dāng)前項(xiàng)目的 Project name 、Project description、Author 等。
這些輸入的值會(huì)自動(dòng)注入到 package.json 和 galaxy.config.js 中對(duì)應(yīng)的 {{ name }} 、{{ description }} 、{{ author }} 模板變量中。
添加模塊依賴
當(dāng)我們的項(xiàng)目/模塊依賴于其他自定義模塊的時(shí)候，引入方式有以下兩種：
這里以 eduAxiosComponent 模塊為例，eduAxiosComponent 基于 axios 進(jìn)行封裝，自身使用增加了一層攔截，可以用于統(tǒng)一攔截。
1、在 package.json galaxyDependencies 對(duì)象中添加模塊名和對(duì)應(yīng)版本號(hào)。
2、啟動(dòng)項(xiàng)目，在啟動(dòng)過(guò)程中，會(huì)使用 webpack 插件分析依賴將 eduAxiosComponent 對(duì)應(yīng)的 1.0.1 版本的所有依賴（包括自身打包產(chǎn)物和它當(dāng)前的依賴）都插入到 externals 中。因?yàn)槟K打包的方式是 umd，所以可以用 import 或者 window 去訪問(wèn)，如下：
如何分析依賴
vue.config.js 中引用了 galaxy.config.js 中暴露的配置對(duì)象，當(dāng)項(xiàng)目編譯的時(shí)候，vue.config.js文件會(huì)被@vue/cli-service 自動(dòng)加載。
vue.config.js 代碼如下：
這里用到了一個(gè)webpack 自定義插件：galaxyfetchdependsplugin 。
galaxyfetchdependsplugin 在 webpack 編譯之前（beforeCompile hooks）主要做了以下事情：
請(qǐng)求 package.json 中 galaxyDependencies 指定的所有依賴模塊的 depends.map.json。
將請(qǐng)求得到的 depends.map.json 中的模塊名稱以鍵值對(duì)的形式注入到 webpack compiler 對(duì)象的 externals 中。
將依賴的模塊資源與當(dāng)前 webpack 編譯的資源文件合并去重（當(dāng)前僅對(duì)重復(fù)字符串進(jìn)行了去重，后續(xù)會(huì)指定重復(fù)規(guī)則，例如協(xié)議、版本、min包導(dǎo)致的重復(fù)等）。
將當(dāng)前項(xiàng)目依賴的資源寫入到 dist/depends.map.json。
重寫 webpackhtmlplugin 插件的 templateParameters 的方法， 將所有依賴的資源寫入到到 html 中。
Jenkins部署
通過(guò) jenkins 部署的時(shí)候，每次都會(huì)將最新的 dist/depends.map.json 以及打包產(chǎn)物上傳到 CDN，當(dāng)其他項(xiàng)目/模塊對(duì)當(dāng)前模塊引用的時(shí)候，只需要按照上面的步驟引入即可。
總結(jié)
帶來(lái)的便利
項(xiàng)目腳手架和模塊腳手架能夠讓團(tuán)隊(duì)開發(fā)人員在開啟一個(gè)新項(xiàng)目或者封裝一個(gè)新模塊之前快速地創(chuàng)建項(xiàng)目結(jié)構(gòu)目錄，降低了重復(fù)搭建的成本，提高了開發(fā)效率，使得各個(gè)團(tuán)隊(duì)之間有了統(tǒng)一的標(biāo)準(zhǔn)。
對(duì)業(yè)務(wù)的影響
項(xiàng)目腳手架在對(duì)原有的臃腫的、前后不分離的、多項(xiàng)目進(jìn)行單獨(dú)的項(xiàng)目拆分時(shí)，能夠快速的創(chuàng)建符合團(tuán)隊(duì)要求的項(xiàng)目結(jié)構(gòu)目錄，開發(fā)人員可以直接上手，無(wú)需更多的搭建和理解成本。
模塊腳手架在對(duì)原有項(xiàng)目公共模塊進(jìn)行抽取拆分時(shí)，可以快速創(chuàng)建模塊項(xiàng)目模板，加上 webpack 的 externals 配置在腳手架中的實(shí)現(xiàn)，使得編譯完的項(xiàng)目體積更小，依賴更清晰，模塊版本更加穩(wěn)定，構(gòu)建更高效。
后續(xù)的影響
后續(xù)團(tuán)隊(duì)會(huì)陸續(xù)對(duì) C 端、B 端項(xiàng)目進(jìn)行拆分，拆分完的項(xiàng)目完全前后端分離，通過(guò) Jenkins 自動(dòng)部署，再由前端 Nginx 統(tǒng)一映射拆分后的項(xiàng)目。而前端腳手架則是為后續(xù)的項(xiàng)目拆分奠定了堅(jiān)實(shí)的基礎(chǔ)。
推薦閱讀：
H5 活動(dòng)頁(yè)面快速生成神器——Mocha
點(diǎn)個(gè)“在看”和“贊”吧，
畢竟我是要成為前端網(wǎng)紅的人。