npm脚本库组织在项目中的地位详解

目录
  • 一、脚本的地位
  • 二、“脚本调度”的难题
  • 三、如此简单？
  • 四、此剑名曰： npm-run-all
    • 4.1 安装
    • 4.2 第一个命令： npm-run-all
    • 4.3 第二个命令：npm-s
    • 4.4 第三个命令：npm-p
    • 4.5 通配符
    • 4.6 更多实用能力

一、脚本的地位

脚本是 项目真正的入口 。

无论你是刚刚 clone 完公司的项目，抑或是你准备在开源社区做一点微小的贡献；你需要做的第一件事，永远是：

打开 package.json，看看 scripts 里都有哪些脚本。

  • 有些脚本负责“构建”，如：build、bundle、build:doc；
  • 有些脚本负责“调试”，如：dev、serve、start;
  • 有些脚本负责“单测”，如 test；
  • 等等……

当你执行 npm run serve 或者 npm run dev 时，你可以开始开发调试，推进项目的进度。

但使用脚本的过程中，也有不便之处。

是什么？往下看。

二、“脚本调度”的难题

王咸鱼是一家小公司的前端骨干，经常负责前端项目重构、架构调整、打包优化等方面的工作。

但他经常遇到这样的问题：

如果我要先运行 build:umd、再运行 build:esm、再运行 build:docs，应该怎么做？

就像这样：

想了想，他觉得自己可以了，于是写了如下代码：

npm run build:umd && npm run build:esm && npm run build:docs

不过项目组的小伙伴很快就提出了质疑：

"build:umd 和 build:esm 没有前置依赖关系啊，应该可以同时构建，这样能提升构建效率。"

王咸鱼一听，觉得很有道理。

构建过程就变成了这样：

这下让王咸鱼为难了，居然没想到快捷的办法，只能引入了 gulp ，并写了一些额外的 js 脚本才解决这个问题。

那么，有更好的办法吗？

这天晚上，王咸鱼加班到深夜，一位正在巡逻的发际线奇高的保安大哥，偶然扫了一眼他的屏幕，用低沉的声音告诉他：

"傻小子，用 npm-run-all 啊！"

新世界的大门从此打开。

三、如此简单？

上面那个让王咸鱼抓耳挠腮的问题，瞬间被解决了！

他只写了一行代码：

{
  "scripts": {
    "build": "npm-run-all -p build:esm build:umd -s build:docs"
  }
}

以上脚本执行后会有什么效果呢？

  • build:umd 和 build:esm 首先会异步同时执行；
  • 以上二者都结束后，会同步执行 build:docs

“完美！”

王咸鱼伸了个懒腰，终于可以下班了。

但是第二天，又有组员提出了疑问：“这仨完全可以同时运行啊！”

王咸鱼听了，觉得很有道理，用了三秒钟就实现了效果，仅仅删了几个代码：

{
  "scripts": {
    "build": "npm-run-all -p build:esm build:umd build:docs"
  }
}

sooooooo！easy!

四、此剑名曰： npm-run-all

npm-run-all 是什么？

官方如此自我介绍：

一个 CLI 工具，可以并行、或者按顺序执行多个 npm 脚本。

对，它可以轻松地组织 “npm 脚本” 的执行顺序。

npmjs: www.npmjs.com/package/npm…

github: github.com/mysticatea/…

4.1 安装

yarn add -D npm-run-all
# or
npm install -D npm-run-all

4.2 第一个命令： npm-run-all

通过 npm-run-all 这个命令，你可以随意组织脚本。它有很多选项，其中最关键的是这两个：

npm-run-all -s a b -p c d

没错，就是 -s 和 -p；

  • s，便是 serial，指 “串行”。
  • p，便是 parallel，指 “并行”。

通过不断组合以上两个选项，可以定义出多种执行顺序，比如：

npm-run-all a b --parallel c d --serial e f --parallel g h i
  • 首先，串行执行 a 和 b
  • 然后，并行执行 c 和 d
  • 再次，串行执行 e 和 f
  • 最后，并行执行 g、h、i

4.3 第二个命令：npm-s

npm-s 可以理解为 npm-run-all --serial的简写。

npm-s a b c

先效果是：串行执行 a，b，c；

4.4 第三个命令：npm-p

npm-p 可以理解为 npm-run-all --parallel的简写。

npm-p a b c

先效果是：并行执行 a，b，c；

4.5 通配符

先假设，如果同时存在 build:umd、build:esm、build:docs，你想让它们三个并行执行。

你可能会写这样的代码：

{
  "scripts": {
    "build": "npm-p build:umd build:esm build:docs"
  }
}

但是呢，就很长，很难看，有没有更好的办法？

有，用通配符：

{
  "scripts": {
    "build": "run-p \"build:*\""
  }
}

舒服！这样就行了，完美！

4.6 更多实用能力

除了上面介绍的顺序编排外，npm-run-all 还提供了很多实用选项：

  • --max-parallel 最大并发数限制。比如你有20个构建物要打包，但 CPU 能力有限，你希望同一时间最多有三个在构建，就可以用它；
  • --continue-on-error 顾名思义，出错了继续执行；
  • --race 参考 Promise.race

....

这也是它相比于直接写 shell 最大的优势所在；

以上就是npm脚本库组织在项目中的地位详解的详细内容，更多关于npm脚本库组织的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 前端面试之输入npm run后执行原理

    前端面试之输入npm run后执行原理

    目录 引言 引言 在前端开发的工作当中,使用 npm run dev 的命令启动本地开发环境,是再正常不过的事了.那么,当输入完类似 npm run xxx 的命令后,究竟是如何触发各种构建工具的构建命令以及启动 Node 服务等功能的呢? 首先我们知道,Node 作为 JavaScript 的运行时,可以把 .js 文件当做脚本来运行,像这种: node index.js 当我们使用 npm 来管理项目(或者 yarn)时,会在根目录下生成一个 package.json 文件,其中的 scri

  • Node.js npm命令运行node.js脚本的方法

    //通过npm运行node脚本 (控制台应用程序) cmd---cd package.json所在的目录---npm start (package.json中的scripts属性中设置start命令) cmd---npm (通过该命令可以查看npm后面能够设置的具体命令) package.json: { "scripts":{ "start": "node demo.js", // cmd环境中,npm start命令 就相当于 node dem

  • 详解npm脚本和package.json

    npm是什么 npm是前端开发广泛使用的包管理工具,它让js开发者分享.复用代码更方便.可以重复的框架代码被称为包(package)或者模块(module),一个包可是是一个文件夹里放着几个文件夹,还有一个package.json文件. 1.什么是npm脚本 在创建node.js项目如一个vue项目,或一个react项目时,项目都会生成一个描述文件package.json . 比如npm允许在package.json文件里面,使用scripts字段定义脚本命令. { //... "scripts

  • 前端面试运行npm run xxx发生过程原理解析

    前端面试运行npm run xxx发生过程原理解析

    目录 引言 package.json文件 总结 引言 事情是这样的,直接开讲 面试官:npm run xxx的时候,发生了什么?讲的越详细越好. 我(心想,简单啊): 首先,DNS 解析,将域名解析成 IP 地址,然后TCP 连接,TCP 三次握手… 面试官:停停,我问的不是从URL输入到页面展现到底发生什么?,是npm run xxx的时候,发生了什么. 我(尴尬,条件反射地以为是问的八股文):emmmm,我记得 npm run xxx的时候,首先会去项目的package.json文件里找sc

  • 输入npm run xxx后执行原理深入解析

    输入npm run xxx后执行原理深入解析

    目录 前言 总结 前言 当我们输入npm run XXX会首先去package.json文件里找scripts 里找对应的xxx,然后执行 xxx的命令,例如我下面这个项目输入npm run dev就会执行vue-cli-service serve 这条命令. package.json文件 那么问题来了: 为什么不直接执行vue-cli-service serve而要执行npm run serve 呢? 因为 直接执行vue-cli-service serve,会报错,因为操作系统中没有存在vu

  • npm脚本库组织在项目中的地位详解

    npm脚本库组织在项目中的地位详解

    目录 一.脚本的地位 二.“脚本调度”的难题 三.如此简单? 四.此剑名曰: npm-run-all 4.1 安装 4.2 第一个命令: npm-run-all 4.3 第二个命令:npm-s 4.4 第三个命令:npm-p 4.5 通配符 4.6 更多实用能力 一.脚本的地位 脚本是 项目真正的入口 . 无论你是刚刚 clone 完公司的项目,抑或是你准备在开源社区做一点微小的贡献:你需要做的第一件事,永远是: 打开 package.json,看看 scripts 里都有哪些脚本. 有些脚本负

  • bing Map 在vue项目中的使用详解

    写在最前面 拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化 引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k

  • MVVM和MVVMLight框架介绍及在项目中的使用详解

    MVVM和MVVMLight框架介绍及在项目中的使用详解

    一.MVVM 和 MVVMLight介绍 MVVM是Model-View-ViewModel的简写.类似于目前比较流行的MVC.MVP设计模式,主要目的是为了分离视图(View)和模型(Model)的耦合. 它是一种极度优秀的设计模式,但并非框架级别的东西,由MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构. 立足于原有MVP框架并且把WPF的新特性糅合进去,以应对PC端开发日益复杂的需求变化. 结构如图所示: 相对于之前把逻辑结构写在Co

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • 在C/C++项目中合理使用宏详解

    C++项目中常使用宏来做跨平台.功能实现隔离.变量定义的功能,这篇文章来讨论下是否所有情况下都适合用宏 小D的故事 程序员小D接到一个任务,需要给同事A提供一个复杂公式的实现.输入为一组参数,输出一个计算结果. 大致如下: double computeSomeThing(double paramA,double paramB,double paramC); 小D很快完成了.过了几天同事A又来找他,说现在需要提升该函数的性能,建议改为在float类型上,用一些SIMD指令.且同事A表示不是很愿意修

  • 如何在ASP.NET Core类库项目中读取配置文件详解

    如何在ASP.NET Core类库项目中读取配置文件详解

    前言 最近有朋友问如何在.net core类库中读取配置文件,当时一下蒙了,这个提的多好,我居然不知道,于是这两天了解了相关内容才有此篇文章的出现,正常来讲我们在应用程序目录下有个appsettings.json文件对于相关配置都会放在这个json文件中,但是要是我建立一个类库项目,对于一些配置比如密钥或者其他需要硬编码的数据放在JSON文件中,在.net core之前配置文件为web.config并且有相关的类来读取节点上的数据,现如今在.net core中为json文件,那么我们该如何做?本

  • HttpClient 在Java项目中的使用详解

    Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们再讨论),它不仅是客户端发送Http请求变得容易,而且也方便了开发人员测试接口(基于Http协议的),即提高了开发的效率,也方便提高代码的健壮性.因此熟练掌握HttpClient是很重要的必修内容,掌握HttpClient后,相信对于Http协议的了解会更加深入. 一.简介 HttpClient是Apache Jakarta Common下的子项目,用

  • Java Web Fragment在项目中使用方法详解

    Java Web Fragment在项目中使用方法详解

    Web Fragment 是什么 - 它是在 servlet 3.0开始支持的,可以把一个dy web项目拆分为多个项目,解耦合,使其在项目中开发效率提高,下面我演示简单的项目创建过程 用eclipse右键new->other->web->web fragment project 项目结构 web-fragment.xml 配置详细内容 <?xml version="1.0" encoding="UTF-8"?> <web-fra

  • Spring MVC项目中的异常处理详解

    Spring MVC项目中的异常处理详解

    目录 前言 1. 基于配置的简单异常处理 2. 基于注解的全局异常处理 总结 前言 我们在项目的开发中,难免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦合度高,工作量大且不好统一,维护的工作量也很大. 那么,能不能将所有类型的异常处理从各处理过程解耦出来,这样既保证了相关处理过程的 功能较单一,也实现了异常信息的统一处理和维护?答案是肯定的.下面将介绍Spring MVC是如何处理异常的. 1. 基于配置的简单异常处理 在SpringMVC中拥有一套非常强大的

  • vue-cli项目中使用Mockjs详解

    vue-cli项目中使用Mockjs详解

    背景 前端在早期jQuery时代时,前端功能和后端工程基本上都是合在一起,典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件. 这个时候,我们总是会遇到这些问题: 老大,接口文档还没输出,我的好多活干不下去啊! 后端小哥,接口写好了没,我要测试啊! 测试时间不够啊,就要发版了,今天难道我有看明天的太阳升起? 诸如种种,就是一句话:劳资,再也不要指望你们了! node出现之后,准确的说是前后端分离之后,前端迫切需要一种机制,不在需要依赖后端接口开发.经过这几年的发展,有好

随机推荐