前端项目中npm脚本命令

npm原理

每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。
因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。
比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。这意味着，当前目录的node_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。
由于 npm 脚本的唯一要求就是可以在 Shell 执行，因此它不一定是 Node 脚本，任何可执行文件都可以写在里面。npm 脚本的退出码，也遵守 Shell 脚本规则。如果退出码不是0，npm 就认为这个脚本执行失败。

介绍

• package.json文件中scripts字段对应的配置是npm run执行的脚本
  默认配置如下所示：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "report": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  }

• 可以再自己增加命令如：

"build:test": "vue-cli-service build",
"build:pre": "vue-cli-service build",

• 除了直接在package.json文件中查看脚本命令外，也可以使用npm run查看项目中所有的脚本命令

变量

• process
  process（进程）其实就是存在nodejs中的一个全局变量。

• env
  返回一个包含用户环境信息的对象。

• npm_lifecycle_event
  返回当前正在运行的脚本名称
  例如：
  1、在终端使用npm run build打包项目，process.env.npm_lifecycle_event就等于build
  2、在终端使用npm run build:test打包项目， process.env.npm_lifecycle_event就等于build:test
  3、在终端使用npm run build:pre打包项目， process.env.npm_lifecycle_event就等于build:pre

应用

• 那么使用这个process.env.npm_lifecycle_event就可以用来区分我们使用的是什么命令打包的，从而区分打包输出路径。

vue项目中，在vue.config.js文件中配置打包输出路径：

const event = process.env.npm_lifecycle_event
var outputDir = 'dist/'
if (event == 'build:test') {
    outputDir = 'distTest/'
} else if (event == 'build:pre') {
    outputDir = 'distPre/'
}

module.exports = {
... // 其他配置
    outputDir,
... // 其他配置
}

现在使用npm run build命令打包出来的是dist文件夹，使用npm run build:test打包出来的是distTest文件夹，使用npm run build:pre打包出来的是distPre文件夹。

参考文献

npm命令