【分享】并行或串行运行多个NPM脚本的CLI工具

简介: 【分享】并行或串行运行多个NPM脚本的CLI工具

背景介绍:


我们的node项目的脚本通通都是放在了package.jsonscripts节点下面,当我们要在一个命令执行完后接着去执行下一个命令的时候(如:打包后需要推送打包内容到服务器)就需要增加一条脚本并使用&&进行拼接两条或多条命令来实现,并且符号&在windows下的cmd.exe是不兼容的。


本期介绍的主角(npm-run-all):


今天主要想分享一个比较不错的Node包,我们可以通过提供的命令来制定脚本的执行计划,在你开发Node应用、Cli工具或着有复杂的多条script需要执行的时候会很有帮助,同样也是在掘金学到的知识再分享一下😂。


🍔有什么用?


  1. 简化脚本:

使用前: npm run clean && npm run build:css && npm run build:js && npm run build:html

使用后: npm-run-all clean build:*

  1. 跨平台:

主要是因为Windows用户通常使用的cmd.exe不支持&来拼接多条命令,但用户量又大。


🍟怎么安装?


Node版本>=4均可

命令:

npm install npm-run-all --save-dev
yarn add npm-run-all --dev
复制代码


🌭怎么使用?


具体案例可参考文末整理的思维导图或项目的readme文件

  1. 定制复杂计划:npm-run-all
  2. 定制串行计划:run-s


  • 案例:


使用前:

npm run clean && npm run lint && npm run build


使用后:

run-s clean lint build

  • Examples
run-s build:*
run-s build:**
run-s lint clean build:**
run-s --silent --print-name lint clean build:**
run-s -sn lint clean build:**
复制代码


  1. 定制并行计划:run-p


  • 案例:


使用前:

npm run lint & npm run build


使用后:

run-p lint build

  • Examples
run-p watch:**
run-p --print-label "build:** -- --watch"
run-p -l "build:** -- --watch"
run-p start-server start-browser start-electron
复制代码
  1. 在NodeJS里面使用


综上所述的出的结论:


  1. 缺点1:脚本冗余;
  2. 缺点2:跨平台能力差。


命令支持:

{
    "scripts": {
        "clean": "rimraf dist",
        "lint":  "eslint src",
        "build": "babel src -o lib"
    }
}
复制代码
  1. npm run 执行:npm run clean && npm run lint && npm run build
  2. run-s执行:run-s clean lint build
  • run-p:并行执行示例:
{
    "scripts": {
        "clean": "rimraf dist",
        "lint":  "eslint src",
        "build": "babel src -o lib"
    }
}
复制代码
  1. npm run 执行:npm run lint & npm run build
  2. run-p执行:run-p lint build
  3. 提示:
  1. 代码非正常退出其他脚本将终止进程;
  2. & 操作符在windows系统的cmd.exe不被支持。

1.png





相关文章
|
7月前
设置VSCode运行任务命令快捷键Alt+R,通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)
设置VSCode运行任务命令快捷键Alt+R,通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)
|
2月前
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章介绍了npm的基础知识和常用命令,包括安装包、查看包信息、管理依赖等操作,并提供了如何删除npm安装的镜像以及如何彻底删除node_modules文件夹的具体步骤。
110 2
|
2月前
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章是关于npm包管理工具的学习、使用指南,包括npm概述、基础命令和如何安装webpack。
84 3
npm学习一:npm 包管理工具 学习、使用。
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
384 3
|
5月前
|
JavaScript 开发工具 git
使用TS+rollup打造一个npm工具库
使用TS+rollup打造一个npm工具库
205 0
|
5月前
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
96 0
|
5月前
|
JavaScript
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
586 0
|
6月前
|
JavaScript
vue : 无法加载文件 D:\module\npm_module\npm_modules\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c
vue : 无法加载文件 D:\module\npm_module\npm_modules\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c
|
7月前
|
前端开发 JavaScript 算法
推荐一个适用npm小工具优雅的写switch
`zwitch` 是一个npm包,旨在改进JavaScript中的条件逻辑,提供更现代、灵活且可测试的替代方案。相比传统的`switch`语句,它支持复杂条件匹配、异步操作,并鼓励函数式编程风格。安装`zwitch`后,可以通过`.case`和`.default`定义处理逻辑,提升代码可读性和测试性。在实际项目中,`zwitch`能增强代码组织和动态配置,与传统`switch`和策略模式相比,具有更高的灵活性和直观性。
|
7月前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
502 1

推荐镜像

更多