項目的背景

去年做的項目了，最近來整理下，先描述下項目背景，在微前端乾坤的項目考慮到了許多額外的場景，計劃用微前端把后臺打造成平臺化的性質(zhì)，承載著不同的項目系統(tǒng)，即有老版本后臺（php項目），又有新版本后臺SPA項目、公司的ERP系統(tǒng)、商家中心系統(tǒng)等等，使用一套的賬戶密碼，一套的權(quán)限控制流程把公司的生態(tài)串聯(lián)起來。
考慮到這些的同時也想到了日后團隊技術(shù)多樣性，所以在基礎(chǔ)嘗試階段也針對乾坤框架做了擴展性的考察，融入了html、vue、react、angular、還包括了服務(wù)端渲染的nuxt、做了嘗試把這些項目整合到一起來模擬以后團隊技術(shù)多樣性的基礎(chǔ)。
通信方面，針對html 乾坤 通過注入 props 到主頁面html，主頁面使用 postMessage 與子頁面 addEventListener 的方式完成通信流程
針對vue 乾坤 通過注入 props 到vue 在根節(jié)點使用 傳入vuex
針對react 乾坤 通過注入 props 到react 在根節(jié)點使用 傳入redux
針對angular 乾坤 通過注入 props 到angular 在根節(jié)點使用 傳入rxjs.... 有點扯遠了
在建立多樣性的項目適合發(fā)現(xiàn)，寫vue 和 react 組件的過程中 每個子項目都有自己的node_modules 如果多個vue 或是 多個react 時他們的 node_modules 基本相同，同樣的東西要反復(fù)下載這很不舒服，因為node_modules文件夾的確大得很，其次看著很不舒服，打開package 看一眼一堆依賴。
針對第一個問題我之前打算的是 在主應(yīng)用安裝依賴，子應(yīng)用運行的時候 把主應(yīng)用的node_modules 用軟連接的形式拷貝到自己的目錄中，但是這樣有個問題，任何一個子應(yīng)用如果想安裝一些其他的額外依賴，即本項目特定的第三方，則必須安裝到主應(yīng)用，可能到后來主應(yīng)用本來沒什么業(yè)務(wù)但是卻下載了很多依賴這就讓人很不爽。
思路了一圈計劃寫個cli，這個cli呢暫定幾個簡單功能，可以初始化項目、本地開發(fā)運行項目、可發(fā)布打包項目。這樣多個子應(yīng)用共用的npm 就可以放在cli上了，基本上就是大量的loade plugin babel 可以提取出來。

程序編寫

1、定義入口文件，文件入口處定義命令的開始 不同的命令分流到不同的程序中處理。

image.png

定義命令的插件 commander 定義命令名稱 參數(shù) 定義描述 定義選項 定義回調(diào)
crossEnvMap 函數(shù) 根據(jù)傳遞進來的參數(shù)動態(tài)設(shè)置 環(huán)境變量

2、進入Server

image.png

判斷了下攔截 環(huán)境變量不對提示出錯誤信息
app_host 是輔助文件可以返回當(dāng)前項目的name 和 啟動的端口，這些信息會存到子程的package中，每個項目的端口不同這樣可以完成自定義。

這里有個重要的概念大多數(shù)的操作路徑是在命令執(zhí)行目錄完成的，所以很多操作都是要拼接目錄，用命令執(zhí)行的目錄拼接相對目路徑達到想要的目錄

image.png

3、拼接命令
和普通的方式不一樣，本套腳手架是像圍繞著微前端的體系打造的，有兩種情況，直接在子應(yīng)用中執(zhí)行，或是在主應(yīng)用中執(zhí)行，主應(yīng)用執(zhí)行的時候 會讓用戶選擇一個子應(yīng)用一起執(zhí)行，（上一篇乾坤文章有提過，主應(yīng)用不包括業(yè)務(wù)邏輯所以單獨運行起來只是一個空殼），如何讓執(zhí)行主應(yīng)用時再開啟一個子應(yīng)用呢，是用執(zhí)行命令的形式 類似 node child_process exec 直接執(zhí)行命令字符串，但是這樣是有弊端的node執(zhí)行命令是順序執(zhí)行，每運行開啟一個子應(yīng)用時，這個子應(yīng)用都是一直保持活躍的因為有webpack server 一直占用進程 他要開啟本地服務(wù) 開啟長連接 開啟文件輪詢監(jiān)測 一旦開啟后不手動關(guān)閉是代表這個服務(wù)沒有關(guān)閉同時node不會進入下一個執(zhí)行語句。
使用concurrently可以同時運行多個服務(wù)。

image.png

4、再次執(zhí)行后 這些命令會重新進入index.js 然后經(jīng)過命令的判斷分流又是簡單的走了一遍 只不過這次會執(zhí)行到真正啟動webpack的地方，使用node來執(zhí)行。

image.png

5、初始化文件
build的過程就不展示出來了 和 開啟本地運行差不多 只是 webpack用run運行 不使用server執(zhí)行
初始化文件流程也很簡單，詢問要初始化文件的模板類型 是手機還是pc，詢問下載后的項目文件夾名稱，詢問要保存的路徑 使用 inquirer 詢問完畢后根據(jù)結(jié)果執(zhí)行下載即可

image.png

image.png

6、給大家看下使用腳手架之后的項目配置樣子 清爽了很多，把公共類的功能提取到了一起。

image.png

以前devDependencies 一大坨 現(xiàn)在就剩這么幾項了，現(xiàn)在把loader plugin babel基本全部移除了。

總結(jié)幾點注意事項。
第一、cli保存的目錄和項目執(zhí)行的目錄是不一樣的，所以想運行什么要使用path.join(process.cwd(), dir) 拼接出執(zhí)行目錄
第二、配置配置項 例如 babel額外的配置 postCss 甚至是eslint的額外配置就不能以外部的形式 使用lrc文件配置了，配置到cli目錄插件找不到，配置到項目中又不共有，所以就直接在loader中使用 options 擴展配置來完成