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 里都有哪些脚本。

有些脚本负责“构建”,如:buildbundlebuild:doc

有些脚本负责“调试”,如:devservestart;

有些脚本负责“单测”,如 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:umdbuild:esm 没有前置依赖关系啊,应该可以同时构建,这样能提升构建效率。"

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

构建过程就变成了这样:

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

那么,有更好的办法吗?

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

"傻小子,用 npm-run-all 啊!"

新世界的大门从此打开。

三、如此简单?

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

他只写了一行代码:

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

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

build:umdbuild: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

首先,串行执行 ab

然后,并行执行 cd

再次,串行执行 ef

最后,并行执行 ghi

4.3 第二个命令:npm-s

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

npm-s a b c

先效果是:串行执行 abc

4.4 第三个命令:npm-p

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

npm-p a b c

先效果是:并行执行 abc

4.5 通配符

先假设,如果同时存在 build:umdbuild:esmbuild: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脚本库组织的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读

    npm代理设置|nps代理

    npm代理设置|nps代理,,1. nps代理国家标准、国际标准、企业标准、行业标准产品认证产品认证制度起源于20世纪初的英国,随着时代的变迁,已成

    nodejs的npm常用命令集合

    nodejs的npm常用命令集合,nodejs,的,npm,常用,命令,集合,NPM,提供,了,很多,,  NPM提供了很多命令,例如install和publish,使用npmhelp可查

    cnpm加速Angular项目创建的方法

    这篇文章主要介绍了cnpm加速Angular项目创建的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧问题描述

    快速使用npm创建一个命令行工具

    本篇文章花十分钟学一下怎么通过 npm 构建一个命令行工具。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。写了一个小

    npm install安装报错怎么解决?

    npm install 安装报错解决办法报错——operation not permitted(没有许可证)【原因】npm的版本过高,导致一些依赖包下载不全【解决】npm in

    vue.js如何使用cnpm来安装?

    vue.js如何使用cnpm来安装?下面本篇文章给大家介绍一下使用cnpm安装vue.js的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家

    react中npm是啥?

    react中npm是啥?react中的npm指的是NPM(node package manager),通常称为node包管理器,是Nodejs默认的、以JavaScript编写的软件包管理系统。

    怎么使用npm下载vue.js?

    怎么使用npm下载vue.js?下面本篇文章给大家介绍一下使用npm下载安装vue.js的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家

    vue.js为什么需要用cnpm镜像来安装?

    Vue.js是前端一个比较火的MVVM框架, 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过