npm script中&&和&

lee1hang發表於2018-08-25

結論先上

bash命令或npm script中使用&來實現併發效果時,實際上是把&左側的命令丟入後臺執行,右側剩餘命令看做 整體 任務在前臺執行,以此來實現併發效果。

&&是序列執行兩側命令,先執行完左側後再執行右側。

切記!!!

command1 & command2 && command3
複製程式碼

並不是併發執行command1command2後再執行command3

而是併發執行command1command2 && command3


過程

最近,我組在遠端構建組內sdk時踩了個坑!!!原先我們是ci構建好sdk,推送到伺服器上,發現經常會出現推過去的zip包檔案不全,或者檔案全了但是檔案的內容不全。很是神奇。

排查一番後發現,我們package.json中的scripts寫了個大概如下的命令

cross-env npm run build-core & npm run build-ui
複製程式碼

並把這個命令用 npm run build 代替。

嗯~看著沒問題,並行的構建sdk-core以及sdk-ui

構建好後就應該是打包,我們卻在ci裡面寫了個“致命”的命令

 npm run build && node publish.js
複製程式碼

publish.js就是我們用來發布到的指令碼檔案。看上去也是沒問題。。但是細想一下,整個命令就變成了這樣

cross-env npm run build-core & npm run build-ui && node publish.js
複製程式碼

這裡就踩到了一個坑!!!!

我們原來是想先並行的構建uicore,完成後執行上傳指令碼。。但是這裡卻變成了並行執行下面兩件事

1. 構建core
2. 構建ui和釋出
複製程式碼

這裡我們可以粗略地理解為&&的優先順序更高所以導致了這種現象。

但其實是bash&命令的特殊性導致的,前面我對“並行”做了特殊高亮,是因為表現上是並行的,但是&命令的含義並不是並行的執行任務。

&命令的真實含義是把左側的任務立即進入後臺執行,這樣就是實現了&兩側任務同時併發執行的效果,實際上會導致上面說的不符合期望的原因並不是因為優先順序問題,按我們的理解&作為運算子的話優先順序是高於&&的,之所以會造成上面的原因是因為命令按順序執行的話,&使得左側任務瞬間進入後臺執行,右側剩餘命令就看做一個整體任務了。


show demo

code地址

準備好4個檔案index1.js,index2.js,index3.js以及package.json

內容分別如下

index1.js

console.log('start index1');

setTimeout(() => {
  console.log('end index1');
}, 6000);

複製程式碼

index2.js

console.log('start index2');

setTimeout(() => {
  console.log('end index2');
}, 3000);
複製程式碼

index3.js

console.log('start index3');

setTimeout(() => {
  console.log('end index3');
}, 500);
複製程式碼

package.json

{
  "name": "npm-script",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "test":"node index1.js & node index2.js && node index3.js"
  }
}
複製程式碼

接著我們執行npm test

神奇的事情發生了!!!

p1

node index1.js & node index2.js && node index3.js
複製程式碼

錯誤的理解上面的執行順序的話,期望結果應該是在index1index2結束後才開始index3,實際輸出否決了這個想法。

那把&當做並行運算子而&&的優先順序更高的話,結果應該是就是index3是在index2後開始,而index1index2是並行開始,看上面的圖確實很像,但有個神奇的地方是,終端已經輸出done了,退出了,過了一會才再次輸出end index1!!

確實很神奇,但結合上面說的&的原理就能理解。

先把index1扔到後臺執行,當前終端執行&右邊的命令,跑完index2後跑index3,然後結束當前終端,此時在後臺的index1可能還沒執行完。這樣就造成了圖示現象。

參考資料

相關文章