跳至主要內容

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

安格前端nodenpm大约 2 分钟...

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

背景

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

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

解决问题

调研

查阅文档发现 npmPre & Post Scriptsopen in new window 用于自定义 npm 脚本的前置/后置操作 。

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

前置/后置操作是由 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

扩展

除了 [Pre & Post Scripts] 还有 Life Cycle Scriptsopen in new window ,比如在 npm install 之前执行特定操作等;

上次编辑于:
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.1.3