npm run demo1 && npm run demo2 & npm run demo3 这个命令到底会怎么执行呢

那个曾经的少年回来了
1,091 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情。

前言 作为一个前端，运行测试项目天天就是跟npm scripts打交道，通常用的都比较简单，直接一个命令运行项目即可。但有时候在写一些复杂的脚本的时候会进行并行或者串行的需求，如果对&&和&使用不当，可能会产生意想不到的后果。下面就来看看这个命令是如何运行的？

1、准备代码

代码结构非常简单，如下图所示

image.png

  • ./demo1.js
function demo(callback, time) {
  setTimeout(() => {
    callback()
  }, time);
}

const fun = () => console.log('demo1')
demo(fun, 3000)
  • ./demo2.js
function demo(callback, time) {
  setTimeout(() => {
    callback()
  }, time);
}

const fun = () => console.log('demo2')
demo(fun, 2000)  //两秒后打印demo2
  • ./demo3.js
function demo(callback, time) {
  setTimeout(() => {
    callback()
  }, time);
}

const fun = () => console.log('demo3')
demo(fun, 1000)   //一秒后打印demo3
  • ./package.json
  "scripts": {
    "demo1": "node demo1.js",
    "demo2": "node demo2.js",
    "demo3": "node demo3.js",
  },

2、npm 串行执行

"chuanxing": "npm run demo1 && npm run demo2 && npm run demo3"

image.png

根据执行情况你可以很明显的感受到：

1.先执行demo1.js,停顿3秒后打印出demo1

1.再执行demo2.js,停顿2秒后打印出demo2

1.最后是demo3.js,停顿1秒后打印出demo3

总结： 按照顺序一个命令执行完毕，才会继续执行后面的命令
用&&符号进行拼接

3、npm 并行执行

"bingxing": "npm run demo1 & npm run demo2 & npm run demo3"

image.png

通过截图和执行情况可以发现（因为我也设置了三秒后打印3，两秒后打印2，一秒后打印1）

  1. 间隔一秒后先打印demo3

  2. 又间隔一秒后打印demo2

  3. 最后又间隔一秒后打印是demo1

总结： 三个命令一起执行，谁的时间短谁就先执行完毕了
用 & 符号进行拼接

4、'&'与 '&&'一起该如何选择呢

"demo": "npm run demo1 && npm run demo2 & npm run demo3"

image.png

其实它是demo1和demo3两个命令先执行，但是demo3只需要一秒钟便可以打印，而demo1,则需要三秒钟。所以先打印demo3,再打印demo1。两个命令都执行完毕之后，再去执行demo2的命令，最后打印出demo2。

总结：并不是先执行demo1,结束后demo2和demo3再并行执行
'&'和'&&'一起的时候，会先执行&前后命令
npm run demo1 && npm run demo2与npm run demo3一起执行
然而前面命令中的两个指令又会进行串行的执行

&的优先级要高于&&,并行指令优先级要高于串行指令

5、总结

  • 一个 & 是代表并行执行左指令和右侧指令
  • 两个 && 是代表串行执行，先执行左侧指令，再执行右侧命令
  • 而如果一个命令中既包含 & ,也包含 &&。&并行的级别要高一些，首先会执行&左右两侧的命令，然后再根据左右两侧指令情况进行执行。

最后有兴趣的再来看看下面这个命令会怎么执行吧？

"demo": "npm run demo1 & npm run demo2 && npm run demo3"
avatar
文章
阅读
粉丝