十分钟搞定npm script在前端项目搭建过程中，我们一般将打包，项目启动命令放在`package.json`的`sc

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

在前端项目搭建过程中，我们一般将打包，项目启动命令放在package.json的script中，今天我们一起来探讨下npm script的其他有意思的用法

命令串行和并行

1、串行

对于npm script中使用串行命令，使用 && 即可, 表示按照顺序执行命令，假如 && 前面的命令报错(通常进程退出码非0),命令会直接终止，不会执行后面的命令。

"scripts": {
    "serve": "vue-cli-service serve",
    "mock": "node ./mockServer.js && npm run serve"
},

这个例子先打开mock server，然后再启动整个服务

2、并行

对于 npm script 中使用并行命令，使用 & 即可，会同时开始执行所有的命令

"scripts": {
    "serve": "vue-cli-service serve",
    "mock": "node ./mockServer.js & npm run serve"
},

上面这个例子是，打开 mockserver 和项目同时开始运行

3、基于库实现串并行

同时我们基于npm-run-all 这个库实现并行和串行

npm run npm-run-all -g

实现串行的配置：

"scripts": {
    "serve": "vue-cli-service serve",
    "mockserver": "node ./mockServer.js",
    "mock": "npm-run-all mockserver serve"
},

实现并行的配置：

"scripts": {
    "serve": "vue-cli-service serve",
    "mockserver": "node ./mockServer.js",
    "mock": "npm-run-all --parallel mockserver serve"
},

配置环境变量

环境变量的配置在npm script的配置中也是非常常见的，基于在package.json中配置的环境变量，可以对生产环境和开发环境的代码逻辑实现控制，这种逻辑是十分常见的，于是介绍两种环境变量的配置方式。

1、在package.json中配置变量

可以通过 npm run env 获取现有的npm中所有的环境变量，并使用 $变量名 的方式在npm script中使用

那如何在package.json中配置固定的环境变量呢？

看看下面的例子：通过在package.json加congfig对象，可以通过 $npm_package_config_port 和 $npm_package_config_extra 来实现获取并直接在script命令中使用

"congfig": {
    "port": 8086,
    "extra": "xxx"
},

2、在script命令中配置环境变量

一般对于node代码，可以直接使用 cross-env 这个包实现

在package.json中

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "cross-env NODE_ENV=test && npm run serve",
},

在后续的node代码中获取环境变量

if (process.env.NODE_ENV === 'text') {}

可以使用的钩子

1、git自带的钩子

git自带的有pre和post钩子，对于某个script命令xxx而言，可以在script命令中增加 prexxx 和 postxxx 命令，实现分别在执行xxx命令之前执行prexxx命令，在之后执行 postxxx命令。举个例子

"scripts": {
    "prebuild": "echo 888"
    "build": "vue-cli-service build",
    "postbuild": "echo 999"
},

先输出 888，然后打包，打包完毕后输出999

2、使用husky的钩子

使用 npm 包 husky，husky 中有很多不同类型的钩子，可以覆盖 Git 的不同阶段，同时配合lint-stage 包，实现在每次 commit 的之前，对暂存区中的文件进行校验。

在 package.json 中加入以下配置，则可以在 commit 之前，实现对 diff 文件的校验

"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.{js,ts,jsx,vue}": [
          "npm run lint:fix"
    ]
}

基于scripty拆分命令

对于npm script 命令，其核心就是运行 shell 命令，对于较为复杂的命令假如完全写在package.json 中会造成文件可读性差的问题，因此可以基于 scripty 这个包实现对命令的拆分

"scripts": {
    "config:test": "scripty"
  },

在根目录下创建 script/config/test.sh 文件，文件中是需要执行的 shell 脚本，使用命令 npm run config:test 即可运行test.sh (需要注意一点是，test.sh文件需要是可执行文件，不然会报错)

同时在生产环境部署一般使用 nodemon, 在生产环境一般使用 pm2