专栏首页Super 前端npm并行&串行执行多个scripts命令

npm并行&串行执行多个scripts命令

通过npm run <commander> 可以运行 package.json 中脚本,Npm 命令不能提供立即运行多个脚本的方式,同时运行需要打开多个终端窗口

npm scripts

  • node_modules/.bin 目录下的命令,可以直接在 scripts 中调用
  • 利用一些脚本生命周期时间 "scripts": { "preinstall": "./configure", "install": "make && make install" } makenpm run install)前后自动执行 ./configure (npm run preinstall)。注意的是,官方并不提倡在 scripts 中定义 install
  • 可以通过process.env.npm_package_scripts_<commander> 查看 scripts 中的命令情况 "scripts": { "test": "node test.js" } process.env.npm_package_scripts_test === 'node test.js'
  • npm run 从根目录运行,不管调用的当前目录是什么(process.env.PWD 一直指向根目录)。可以通过 process.env.INIT_CWD 获得所处的完整路径。
  • 清除缓存 $ npm cache clean --force $ yarn cache clean

问题

下述通过 Bash 来实现的

"scripts": {
  "deploy": "vue-cli-service build & vue-cli-service build screen && node deploy.js"
}

期望: 并发执行vue-cli-service buildvue-cli-service build screen ;执行完后再执行 node deploy.js

实际: 并发执行 vue-cli-service buildvue-cli-service build screen && node deploy.js

简化示例,进行实验讨论

示例

1.js

#!/usr/bin/env node
setTimeout(() => {
  console.log('1')
}, 6000)

2.js

setTimeout(() => {
  console.log('2')
}, 3000)

3.js

setTimeout(() => {
  console.log('3')
}, 1000)

Bash

命令

说明

&&

顺序执行多条命令,当碰到执行出错的命令后将不执行后面的命令

&

并行执行多条命令

||

顺序执行多条命令,当碰到执行正确的命令后将不执行后面的命令

|

管道符

&&

"scripts": {
  "test": "node ./build/1.js && node ./build/2.js && node ./build/3.js"
}

顺序执行多条命令,输出结果:1 2 3

&

"scripts": {
  "test": "node ./build/1.js & node ./build/2.js & node ./build/3.js"
}

并行执行多条命令,输出结果:3 2 1

||

"scripts": {
  test": "node ./build/1.js || node ./build/2.js || node ./build/3.js"
}

输出结果:1

执行正确后不会执行后面的命令,何谓成功or失败呢? Bash:成功 exit 0;失败(非0) exit 1 Nodejs:成功 process.exit(0);失败(非0) process.exit(1)

先并行后串行?

"scripts": {
   "test": "node ./build/1.js & node ./build/2.js && node ./build/3.js"
}

输出结果:2 3 1 惊喜不惊喜(并不是预期的 2 1 3)!你可能会说,是以为优先级的问题导致的,应该这样:

"scripts": {
   "test": "(node ./build/1.js & node ./build/2.js) && node ./build/3.js"
}

你想多了,输出结果仍然是:2 3 1

注意,上述在window下不能生效!

concurrently

跨平台,同时运行多个命令(并发)。

"scripts": {
	"test": "concurrently \"node ./build/1.js\" \"node ./build/2.js\" \"node ./build/3.js\""
}

并行执行多条命令,输出结果:3 2 1

只能并行,不能顺序执行!

npm-run-all

跨平台,一种可以并行或顺序运行多个 npm 脚本的 CLI 工具。

  • npm-run-all 综合性命令(可顺序可并行)
  • run-s 简写,等价于 npm-run-all -s 顺序(sequentially)运行 npm-scripts
  • run-p 简写,等价于 npm-run-all -p 并行(parallel)运行 npm-scripts
"script": {
  "n_1": "node ./build/1.js",
  "n_2": "node ./build/2.js",
  "n_3": "node ./build/3.js",
  "test": "npm-run-all -p n_1 n_2 -s n_3",
}

输出结果:2 1 3(并行执行n_1、n_2;然后执行n_3

npm-run-all 还具备支持参数传递;错误退出控制;提供 Node Api ;以及一些优化项npm-run-all --parallel dev:**等。

注意,npm-run-all node 方式不支持,其实针对 npm scripts 并发和顺序执行的解决方案;但对于 Yarn 同样支持!

借助 scripts 生命周期事件关系

通过 npm-run-all 可以启发我们,可以通过 scripts 的一些属性关系来达到顺序执行。

"scripts": {
  "prepack": "concurrently \"node ./build/1.js\" \"node ./build/2.js\"",
  "pack": "node ./build/3.js",
}

prepack: run BEFORE a tarball is packed (on npm pack, npm publish, and when installing git dependencies)

注意,只提供一种思路,并不提倡大家使用。因为内置的事件名称本身就有一定的特定意义

其他

目前社区还有类似的一些开源处理方式(shell-executornpm-parallel )等等,实现方式基本大同小异,感兴趣的小伙伴可自行查阅!

相关地址

  • https://www.npmjs.cn/misc/scripts/
  • https://github.com/kimmobrunfeldt/concurrently
  • https://github.com/mysticatea/npm-run-all

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript常用对象&属性&事件-图标

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • package.json

    每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm i...

    奋飛
  • 发布项目到NPM

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Vue 新增不参与打包的接口地址配置文件

    vue工程项目,npm run build webpack方式打包,每次打包后如果需要更改后台接口地址(项目中,接口地址设置成变量,存放在js文件中,需要用到的...

    授客
  • 项目实战_Python.利用Python

    说明: 主要用于Redis实例集中化实时主动监控,后端采用Python+Flask实现,具体实现代码请阅读代码

    py3study
  • CSS瞬间黑暗模式

    最近微信也逃脱不了黑暗时代的到来,网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢?

    前端开发博客
  • 基于webpack4搭建的react项目框架

    框架介绍,使用webpac构建的react单页面应用,集成antd。使用webpack-dev-server启动本地服务,加入热更新便于开发调试。使用bundl...

    random_wang
  • thinkjs学习笔记

    thinkjs 开始 安装 npm install -g thinkjs-cmd 查看是否安装成功 thinkjs -v 新建项目 mkdir new_dir_...

    IMWeb前端团队
  • thinkjs学习笔记

    thinkjs的配置有很多,系统默认配置 -> 应用配置 -> 调试配置 -> 模式配置 基本上只用到应用配置,应用配置的路径是App/Conf/config....

    IMWeb前端团队
  • PHP环境安全加固

    随着使用 PHP 环境的用户越来越多,相关的安全问题也变得越来越重要。PHP 环境提供的安全模式是一个非常重要的内嵌安全机制,PHP 安全模式能有效控制一些 P...

    php007

扫码关注云+社区

领取腾讯云代金券