天天看點

一行npm指令打包兩個node版本不同的項目

背景:公司背景管理系統的代碼是angularjs項目和vue項目在一起混搭,vue項目其實是屬于angularjs的子項目。如圖:

一行npm指令打包兩個node版本不同的項目

問題:之前在用svn釋出上線時,都是手動通過nvm執行兩次node版本切換,再執行兩次打包指令。遷移git要自動釋出,就要考慮将四條指令合并成一一條指令。

解決方案:​

    1.  老背景使用的gulp打包,node版本v6.9.2。如下,老背景gulp在打包時會執行一條clean的task,這條任務會将dist目錄下面的所有資源全部清除掉。​​​​​​

一行npm指令打包兩個node版本不同的項目

        現在因為vue-admin的項目打包之後的靜态資源需要存放在dist/vue下面,是以clean這條任務就需要做個小改動,清除掉除了vue子項目之後的其他資源。如下

一行npm指令打包兩個node版本不同的項目

       vue-admin項目的打包也需要做一些修改,如下 。

一行npm指令打包兩個node版本不同的項目

        現在在編譯機器上通過固定的指令來編譯,其實這個不修改也沒關系。最開始修改這個主要是因為,送出代碼是需要送出dist目錄,本地自己去打好包,自己打包就會存在打包的先後問題,如果先打vue的包,再打angularjs的包,gulp就會把dist/vue目錄一起清掉。

    2.  明确一下接下來要做的事情:想要達到的效果,在angularjs項目根目錄,執行npm run build:test,這條指令可包含以下所有操作:

         (1) nvm use v6.9.2  -- node版本切換到6.9.2

         (2) npm run gulp    --執行angularjs項目打包

         (3) cd vue-admin   --進入到vue-admin項目目錄,準備打包編譯vue項目

         (4) nvm use 10.16.2   -- node 版本切換到10.16.2

         (5) npm run build:test   執行vue項目測試環境的打包

        以上5步需要同步執行,因為打包的node版本是不一樣的。linux環境中 每條scripts使用  '&&'  則表示同步執行.

       修改打包指令,如下 

一行npm指令打包兩個node版本不同的項目

      重點的兩條指令已經用紅框圈起來了,其中build:vue:test中的--prefix的作用就是指定目錄執行打包指令。

      然後,build:test中的source ~/.nvm/nvm.sh這個如果不添加,會報nvm command not found的錯誤(即使你的nvm已經正常安裝),我在網上查到的原因是說 linux中執行shell腳本就需要執行前面的小段代碼,應該是指定nvm的安裝路徑的吧。。。

      剩下npm run build:mirror和npm run build:online的解釋同上。