优化 NPM 脚本

有时候，运行一个工程，可能需要执行多个脚本。如需要执行客户端代码的 webpack 打包，还要执行服务端代码的 webpack 打包，当服务端代码进行 webpack 进行打包后，还要重新启动服务器等。
本文就是基于这样一个需求，使用 npm-run-all，better-npm-run 和 nodemon 来优化 NPM 脚本。

基本配置

先满足最基本的需求：配置客户端和服务端代码的 webpack 打包命令：

{
...
"scripts": {
    "run:server":"node dist/server.js",
    "dev:server": "cross-env PLANTFORM=SERVER ENV=DEVELOPMENT webpack --config build/webpack.config.js --watch",
    "dev:client": "cross-env PLANTFORM=CLIENT ENV=DEVELOPMENT  webpack --config build/webpack.config.js --watch",
    "build:server": "cross-env PLANTFORM=SERVER ENV=PRODUCTION webpack --config build/webpack.config",
    "build:client": "cross-env PLANTFORM=CLIENT ENV=PRODUCTION webpack --config build/webpack.config",
    "update:check": "ncu",
    "update": "ncu -a"
  }
...
}

在命令行执行 npm run dev:server 和 npm run dev:client 分别可以在服务端和客户端使用 webpack 打包，并自动监听文件变化。执行 npm run build:server 和 npm run build:client 分别可以在服务端和客户端执行生产环境构建。
执行 npm run run:server 可以运行服务器。
另外 update:check 和 update 两个命令分别用来检查 package.json 中依赖包的更新版本和强制更新 package.json 中的依赖。
配置完上面的命令后，就可以用来进行开发了。但是使用还比较麻烦：客户端和服务端的构建，需要分别开启两个命令行窗口，再加上启动 Node 服务的窗口，一共三个窗口。同时，当服务端构建的代码发生变化后，无法自动重启服务器，需要手动停止再运行服务，可谓相当麻烦。

服务器自动重启

让我们先来解决服务器自动重启的问题，这需要用到nodemon 这个包，类似的还有supervisor这个包，后面这个包有一段历史了，但是作者已经很久没有更新了。推荐使用nodemon。
借助nodemon，优化NPM脚本：

{
...
"scripts": {
    "run:server":"nodemon --watch dist --exec node dist/server.js",
    ...
  }
...
}

现在，当 dist 目录发生变化，就可以自动重启服务器了。

命令并行执行

借助 nodemon，解决了服务器自动重启的问题，但是三个命令行窗口还是很麻烦，我们可以借助 npm-run-all 这个包，来让三个命令在一个命令行窗口中运行：

{
...
"scripts": {
    "start": "npm-run-all --parallel dev:* run:server",
    "build": "npm-run-all --parallel build:*",
    ···
  }
...
}

我们在 scripts 中加了一个 start 和 build 命令，运行 npm run start 和 npm run build 就可以实现在一个命令行窗口中，并行执行开发和生产环境中的命令。
--parallel 用来指定哪些命令需要并行执行，支持通配符。

优化脚本

上面我们已经完成了想要的功能：服务器自动重启和命令并行执行。乍看 scripts 中的命令，很长很凌乱。对于这个问题，可以借助better-npm-run 这个包来进行优化：

{
···
 "scripts": {
    "start": "better-npm-run start",
    "build": "better-npm-run build",
    "dev:server": "better-npm-run  dev:server",
    "dev:client": "better-npm-run dev:client",
    "build:server": "better-npm-run build:server",
    "build:client": "better-npm-run build:client",
    "run:server": "better-npm-run run:server",
    "update:check": "better-npm-run update:check",
    "update": "better-npm-run update"
  },
  "betterScripts":{
    "start": "npm-run-all --parallel dev:* run:server",
    "build": "npm-run-all --parallel build:*",
    "run:server": "nodemon --watch dist --exec node dist/server.js",
    "update:check": "ncu",
    "update": "ncu -a",
    "dev:server":{
      "command":"webpack --config build/webpack.config.js --watch",
      "env":{
        "PLANTFORM":"SERVER",
        "ENV":"DEVELOPMENT"
      }
    },
    "dev:client":{
      "command":"webpack --config build/webpack.config.js --watch",
      "env":{
        "PLANTFORM":"CLIENT",
        "ENV":"DEVELOPMENT"
      }
    },
    "build:server":{
      "command":"webpack --config build/webpack.config.js",
      "env":{
        "PLANTFORM":"SERVER",
        "ENV":"PRODUCTION"
      }
    },
    "build:client":{
      "command":"webpack --config build/webpack.config.js",
      "env":{
        "PLANTFORM":"CLIENT",
        "ENV":"PRODUCTION"
      }
    }
  },
···
}

通过better-npm-run这个包，我们把脚本命令写得更具有层次感，虽然代码量增加了，但结构更加清晰。

完。