NPM 运行脚本

指针蝉翼
• 阅读 2182

NPM 运行脚本

有时候,运行一个工程,可能需要执行多个脚本。如需要执行客户端代码的 webpack 打包,还要执行服务端代码的 webpack 打包,当服务端代码进行 webpack 进行打包后,还要重新启动服务器等。

基于这样一个需求,可以使用 npm 钩子,cross-env,better-npm-run 和 npm-run-all 来优化 NPM 运行脚本。

npm 钩子

npm 默认提供下面这些钩子

prepublish,postpublish
preinstall,postinstall
preuninstall,postuninstall
preversion,postversion
pretest,posttest
prestop,poststop
prestart,poststart
prerestart,postrestart

npm run install 默认执行顺序:npm run preinstall > npm run install > npm run postinstall

cross-env

cross-env 跨平台环境变量设置

Mac Window node scripts 设置环境变量兼容插件

Node.js10 以及更高版本,npm install cross-env -D
Node.js8 以及更低版本,npm install cross-env@6 -D

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

better-npm-run

better-npm-run 长命令单独拎出来写

"scripts": {
    "build:dev": "better-npm-run build-dev",
    "build:prod": "better-npm-run build-prod",
    "test": "better-npm-run test"
},
"betterScripts": {
    "build-dev": "webpack --config $npm_package_webpack --progress --colors",
    "build-prod": {
        "command": "webpack --config $npm_package_webpack --progress --colors",
        "env": {
            "NODE_ENV": "production"
        }
    },
    "test": {
        "command": "karma start",
        "env": {
            "NODE_ENV": "test"
        }
    }
}

npm-run-all

npm-run-all 同时组织执行多个脚本

运行 npm run dev,会一次执行 dev:start、dev:build:client、dev:build:server 命令

npm install npm-run-all -D

{
    "dev": "npm-run-all --serial dev:**",
    "dev:start": "nodemon --watch build exec node \"build/bundle.js\"",
    "dev:build:client": "webpack --config webpack.config.client.js --watch",
    "dev:build:server": "webpack --config webpack.config.server.js --watch"
}

多种运行多个命令的方式:默认 --serial
    --parallel: 并行运行多个命令
        npm-run-all --parallel lint build 或
        run-p lint build
    --serial: 多个命令按排列顺序执行
        npm-run-all --serial clean lint build:** 或
        run-s clean lint build:**
    --continue-on-error:
        是否忽略错误,添加此参数 npm-run-all 会自动退出出错的命令,继续运行正常的
    --race:
        添加此参数之后,只要有一个命令运行出错,那么 npm-run-all 就会结束掉全部的命令

Glob-like 名称匹配
    你可以使用 Glob 通配符来匹配任务名称,方便指定多个名称相似的任务
    npm-run-all --parallel watch:*
        不匹配分隔符,同时运行 watch:html watch:js 但不运行 watch:js:index。
    npm-run-all --parallel watch:**
        匹配分隔符,所有以 watch: 开头的脚本都会被运行。
点赞
收藏
评论区
推荐文章
Stella981 Stella981
4年前
Python—执行系统命令的四种方法(os.system、os.popen、commands、subprocess)
一、os.system方法这个方法是直接调用标准C的system()函数,仅仅在一个子终端运行系统命令,而不能获取命令执行后的返回信息。os.system(cmd)的返回值。如果执行成功,那么会返回0,表示命令执行成功。否则,则是执行错误。使用os.system返回值是脚本的退出状态码,该方法在调用完shell脚本后
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
代码哈士奇 代码哈士奇
4年前
webpack5构建一个简单的vue项目 (练习)
webpack5构建vue必要环境安装ndejs我们需要安装node如果没有安装则安装安装过则跳过执行nodevnpmv初始化项目文件夹新建一个空的项目执行npminity初始化npminity会生成一个package.json安装webpack以及htmlwebpackplugin控制台执行npmiwebpackwebpackcliwebpackdevserverhtmlwebpackpluginD安装babelloaderbabel可以将我们的代码向下
皮卡皮卡皮 皮卡皮卡皮
4年前
webpack 基本配置
概念本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。安装确保安装了nodejs项目文件环境cd
Jacquelyn38 Jacquelyn38
4年前
React.js中JSX的原理与关键实现
在开始开发之前,我们需要创建一个空项目文件夹。安装1.初始化npm init y2.安装webpack相关依赖npm install webpack webpackcli D3.安装babelloader相关依赖npm install babelloader @babel/core @babel/presetenv D4.
Jacquelyn38 Jacquelyn38
4年前
Webpack学习整理集锦【从最基础的demo入手,自己实现一个脚手架 】
前言本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。开源网址https://github.com/maomi
Stella981 Stella981
4年前
Electron中通过asar打包后ffi
在使用Electron开发完应用程序后,需要打包生成各平台对应的可执行文件供用户使用。这里以Mac平台为例,最简单的打包方案是使用electronpackager来对应用程序进行打包操作,如执行最简单的指令electronpackager.执行完成后会在同级目录生成${appName}${platfomr}${arch}目录如e
Wesley13 Wesley13
4年前
Java执行shell脚本并返回结果两种方法的完整代码
Java执行shell脚本并返回结果两种方法的完整代码简单的是直接传入String字符串,这种不能执行echo或者需要调用其他进程的命令(比如调用postfix发送邮件命令就不起作用)执行复杂的shell建议使用String\\方式传递(对外可以封装后也传入String字符串)。/运行shell脚本
可莉 可莉
4年前
18个常用 webpack插件,总会有适合你的!
!(https://oscimg.oschina.net/oscnet/71317da0c57a8e8cf5011c00e302a914609.jpg)来源| https://github.com/Michaellzg/myarticle/blob/master/webpack/Plugin何为插
Stella981 Stella981
4年前
Shell 特殊变量
shell编程中有一些特殊的变量可以使用。这些变量在脚本中可以作为全局变量来使用。名称说明$0执行脚本的名称$19脚本执行时的参数1到参数9$?脚本的返回值,代表上一个命令是否执行成功,如果成功,则为0,否则不成功$!代表最后执行的后台命令的PID    $脚本执行时,输入的参数的个数$@输入的参数
指针蝉翼
指针蝉翼
Lv1
一声梧叶一声秋,一点芭蕉一点愁,三更归梦三更后。
文章
2
粉丝
0
获赞
0