npm指令的串行执行和并行执行有那几种方式

3,388 阅读2分钟

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

前言:
上一篇文章学习的&&&其实就是并行和串行的指令执行,文章链接为juejin.cn/post/712703…
本文主要来介绍一下几种执行串行命令和并行命令的方式

1、第一种方式

就是上一篇文章中介绍的&&&,如果有不太明白的,可以点击前言中的链接去看一下,相信你可以学到一些知识,如果你已经非常熟悉,那就可以忽略了。

2、第二种方式 npm-run-all

首先这是一个npm包

npm i npm-run-all

npm-run-all 、run-s 、run-p 后面两个其实是两个缩写形式,分别代码串行执行和并行执行, 而 npm-run-all 默认是串行执行,当然你可以添加参数

  • npm-run-all 默认串行执行
  • npm-run-all -- sequential:串行执行
  • npm-run-all -- parallel:并行执行

串行指令可以直接简化为以下:

// chuanxing 当然名字不能相同,我这里好做比较所以就暂时写成相同

"chuanxing": "npm run demo1 && npm run demo2 && npm run demo3",
// 或 默认指令 其实也可以加默认参数 --sequential
"chuanxing": "npm-run-all demo1 demo2 demo3",
// 或简化指令 run-s
"chuanxing": "run-s demo1 demo2 demo3",

原来的并行指令可以简化为以下:

// bingxing 当然名字不能相同,我这里好做比较所以就暂时写成相同

"bingxing": "npm run demo1 && npm run demo2 && npm run demo3",
//或 简化指令 run-p
"bingxing": "run-p demo1 demo2 demo3",
// 默认指令加参 --parallel
"bingxing": "npm-run-all --parallel demo1 demo2 demo3"

3、第三种方式 concurrently并行执行命令库

这也是一个npm库,要先安装

npm i concurrently

并行执行命令的示例

"start": "concurrently \"npm run demo1\"  \"npm run demo2\"  \"npm run demo3\""

4、pre和post

npm run为每条命令提供了prepost两个钩子(hook)。找个例子可能更好理解一些

"predemo1": "node demo2.js",
"demo1": "node demo1.js",
"postdemo1": "node demo3.js",

image.png

可以发现先执行的是predemo1钩子命令,这个其实就是前置钩子。

然后开始执行demo1命令,这也是我们的主体命令了。

最后会执行postdemo1钩子命令,这个其实就是后置钩子。

5、总结

  • 学习几种方式如何去串行执行和并行执行命令

  • 某个命令的前置钩子命令和后置钩子命令

  • 理解前后置钩子和串行、并行便可以根据实际情况去变通组合,更方便、有利于写出符合实际情况的脚本