一、寫在前面

我曾嘗試過利用vue自身的模組化與webpack配合實現此功能，但是由於webpack編譯時不能識別程式碼中的條件判斷，他只會將從入口檔案開始的import和require引入的檔案全部打包進去，不能根據程式碼中的條件判斷動態引入需要的檔案實現自定義打包。所以我想到可以直接將之前手動拼裝檔案的過程自動化，那自動化我就會想到使用linux的一些命令，寫一個自動化指令碼，交給程式去執行就好了。我的這個方法肯定不是最好的，有更好的方式歡迎大家評論留言，共同進步。

二、需求

我們公司有一款app，它有一些通用化的功能，也存在一些根據客戶需求定製化的一些功能，同時還會不定時升級，功能拆分組裝等，這種就會出現遺漏升級，重複開發，出錯率也會增加。所以我就想實現只寫一套程式碼，通過勾選☑️的配置方式實現非技術人員也可以自助生成app，這樣釋放了勞動力，也提高了工作效率。

三、設計思想

首先要將功能細化並拆分成模組，這點利用vue天生的模組化思想很容易就可實現；其次拼裝好模板，比方說功能1+功能2是一種模板，功能3和功能4是一種模板，因為vue我沒找到可以動態註冊區域性元件的方法（此方法很笨，後來我想到了可以利用sed命令寫檔案以實現動態引入元件）；最後就要在伺服器上部署打包環境了，這個我是首先在docker上將環境配置好，之後將配置檔案上傳到伺服器上即可。

四、使用到的技術棧

• vuejs
• nodejs
• express
• shelljs

五、目錄設計

這是一個基於cordova的app

5.1 總體目錄解釋

• platforms:cordova專案自帶，專案安裝的平臺
• plugins:cordova專案自帶，專案安裝的cordova外掛
• vuxProject：vue專案目錄
  • build：webpack配置檔案
  • config：webpack配置檔案
  • src：webpack打包的目錄
  • srcAllVersions：所有功能模組檔案，之後根據配置檔案將需要的檔案移入src資料夾下
  • static：靜態資原始檔
• www：vue打包之後的檔案

5.2 srcAllVersions目錄解釋

• assets：靜態資原始檔，包括圖片，css，js等
• components: 細化的功能元件
• cordova：cordova的一些配置檔案
• main：vue的入口檔案
• pages：頁面模板檔案
• resources：app的資原始檔，包括啟動動畫圖片，applogo圖片
• router：vue的路由檔案
• services：一些服務的js檔案，包括介面服務，與第三方sdk對接的服務
• APP.vue: vue-cli建立的主vue檔案
• common.js: 自己封裝的公共方法檔案
• CONSTANT.js:自定義的常量js檔案
• Listener.js:監聽push的檔案
• Vue.js:主要用來加一些攔截器，定義一些全域性的方法

六、docker配置cordova打包所需要的環境

1. 在cordova專案中命令列輸入cordova requirements即可看到cordova所依賴的環境

• java jdk:1.8.0版本
• android sdk
• android target:我這邊安裝了23,25,26,27,28
• gradle:4.1版本

2. 配置docker映象

   2.1 映象檔案目錄如下：

我將需要的gradle，jdk，sdk都直接放在映象中了，這裡要注意的是要根據你docker的系統下載相應的包，我這裡下載的都是linux的包。之前我是用使用wget命令在建立docker映象的時候命令列下載相應的包，此種方式比較耗費伺服器資源，所以改用直接將本地檔案上傳到docker某目錄下即可。

• Dockerfile檔案是建立映象時，執行的一些指令碼，內容如下：

[注]： 當時遇到的最大困難就是在.bashrc檔案中配置環境變數，使用source命令未能儲存成功，導致不能執行下面的命令 解決辦法：使用docker的ENV命令，直接寫入系統環境變數即可

3. 配置docker例項 目錄結構如下：

• logs：記錄日誌的檔案
• node-Dockerfile：配置檔案
• .env
• docker-compose.yml:在此檔案中我將本地專案檔案對映到docker例項中

七、模組化打包

7.1 更細節的設計思想

1. 從總程式碼池(srcAllVersions資料夾)中選擇好需要的功能模組與模板，要定義好從form的資料夾，以及to的資料夾
2. 將其放入目的碼池中(src資料夾)，並修改檔名，ex：總程式碼池中叫template01，但是在目的碼池當中需要修改為main.js

接下來看一下node專案的目錄結構：

• api.js：定義介面
• app.js：node主檔案
• config.js：自定義組裝資料夾的配置檔案
• CONSTANT.js:定義了一些常量，比如路徑常量

7.2 詳細講解config.js檔案

在此檔案中我定義了一個Obj

• indexBg：為前端傳的key
• source下的key為indexBg的值，一個值對應一個檔案，即根據使用者傳的自定義配置，從總程式碼池中摘取對應的檔案
• sourcePath：表示原始檔路徑，這裡面出現的Source_Path等變數都在CONSTANT.js檔案中定義了
• aimsPath：目標路徑，即將此原始檔的副本移到哪個目錄下
• oldName：原始檔的檔名
• newName：移入到目標資料夾下，需要修改為新的資料夾，如果新檔名和原始檔名相同，則不需要配置

7.3 詳細講解組裝檔案介面

1. 首先如果存在舊檔案，需要先刪除歷史檔案
2. 將原始檔拷貝到目標資料夾內
3. 修改檔名（針對多模板的檔案）
4. 返回成功

7.4 詳細講解設定app資訊的介面

1. 獲取app名字，版本，appid
2. 刪除歷史config.xml檔案
3. 將原始檔中的config.xml拷貝到cordova目錄下
4. 將app相關資訊寫入到config.xml的對應的位置
5. 返回成功

7.5 詳細講解安裝外掛的介面

1. 由於此介面所做的shell指令碼需要過長的時間執行，會導致超時，所以我設計了一個輪詢機制，在調取此介面的同時也要調取輪詢介面
2. 輪詢介面的設計思想，在調取安裝外掛介面的最開始，建立一個此使用者的的檔案，並在檔案中寫入“build-init”標誌，當次介面執行完，會在檔案中覆蓋寫入“build-suucess”標誌，然後輪詢介面只要輪詢到此檔案寫入了“build-success”標誌就返回成功

1. 進入到src目錄，執行npm run build更新www檔案
2. 更新cordova（此步驟必需，不然執行其他cordova命令會先出現此提示），然後刪除原android平臺
3. 重新新增android平臺，注意版本
4. 需要向這兩個檔案中寫入相容語法

5. 由於我們app的底層需要根據硬體裝置選用不同的底層sdk，且多個sdk同時安裝了會出現打包錯誤 1. 首先要判斷當前專案中是否已經存在所需要的sdk，如果存在則返回正確，繼續；否則安裝相應的sdk，同時刪除其他sdk外掛 2. 這個判斷我是根據package.json檔案匹配相應的sdk名字，匹配成功表示已存在，不成功則表示不存在

6. 以上都執行完畢，向輪詢的檔案寫入“build-success”標誌 7. 返回成功

7.6 詳細講解生成apk介面

1. 此介面同上，也需要配一個輪詢介面
2. 輪詢成功返回生成的apk地址，前端可下載

1. 先建立一個該使用者的輪詢檔案，並寫入“apk-init”標誌
2. 根據要生成apk的環境（正式/測試/本地除錯），使用不同的打包命令，只有正式環境需要加上簽名
3. 為了防止出現同名檔案，所以將存在的apk刪除
4. 生成apk檔案
5. 在輪詢檔案中寫入“apk-success”標誌
6. 返回成功

八、後期維護

8.1 新增新的功能模組

1. 做好元件化，減少耦合性，放到srcAllVersions資料夾內相應的components/pages檔案下即可
2. 組合新的頁面模板
3. 需要在打包平臺的前端，新增新的配置項
4. 後端組裝檔案介面的config檔案需要加一條配置項

8.2 修改bug

找到原始檔，修改bug即可