npm 执行脚本时前置(pre)/后置(post)操作

安格大约 2 分钟...

假设 package.json 的 scripts 中有自定义脚本如 serve, 我们可以再额外增加两个脚本: preserve 和 postserve, 即在原脚本名的基础上加上前缀 pre 或 post ，分别表示前置和后置操作，这样在执行 npm run serve 前后可以自动执行上述前置/后置命令。

背景

vue-cli 项目，通过模式和环境变量实现不同环境的配置；
本地开发默认使用 .env.development 的内容，该文件是受版本控制的，不希望被团队成员各自去修改并且误提交，所以要求本地临时配置写在 .env.development.local 中，该文件是不受版本控制的，这样即解决了所有问题；

但是事与愿违，有的小伙伴不按照要求去创建 .env.development.local ，而是依然去修改 .env.development ，还喜欢 git add . && git commit -m "xxx" 都给提交了；

解决问题

调研

查阅文档发现 npm 有 Pre & Post Scripts 用于自定义 npm 脚本的前置/后置操作。

比如 package.json 的 scripts 中有我们自定义的脚本 serve, 那么我们可以再额外增加两个脚本: preserve 和 postserve, 即给原脚本名加上前缀 pre 或 post ，分别表示前置和后置操作。

前置/后置操作是由 npm 自动去执行的，比如执行 npm run serve 时，preserve 脚本会先自动执行, 执行成功后再执行真正的 serve 脚本，serve 脚本执行成功后会继续自动执行 postserve 脚本；

例如:

{
  "scripts": {
+   "precompress": "{{ executes BEFORE the `compress` script }}",
    "compress": "{{ run command to compress files }}",
+   "postcompress": "{{ executes AFTER `compress` script }}"
  }
}

处理

所以回到我开始的问题，为了保证团队中的小伙伴都能按照要求去创建 .env.development.local 文件，我们这里使用 Pre Scripts 来自动创建该文件：

{
  "scripts": {
+   "preserve": "env_file=\".env.development.local\";[ -e \"${env_file}\" ] || cp ${env_file%.*} ${env_file}",
    "serve": "vue-cli-service serve --open",
    ...
  }
}

如上，scripts 中增加了 preserve 脚本，这样当小伙伴执行 npm run serve 时 .env.development.local 文件会自动先行创建；

这里顺带解释下脚本内容:

# 原始 shell 命令如下
env_file=".env.development.local"; [ -e "${env_file}" ] || cp ${env_file%.*} ${env_file}

# 拆解如下
env_file=".env.development.local"; # 声明变量: 待生成的文件名
[ -e "${env_file}" ] || cp ${env_file%.*} ${env_file}; # 如果该文件名不存在, 则 cp .env.development .env.development.local