npm run serve 运行过程

之前文章分析过vue-cli创建工程项目过程Vue-cli(3.0 + ) 源码分析(一)_夜跑者的博客-CSDN博客_vue-cli源码

这篇文章看看我们经常运行的命令 npm run serve执行过程。

1. 脚本从哪里来

package.json中scripts字段定义脚本命令。scripts字段是一个对象，它的每一个属性，对应一段脚本。如下所示：

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

npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。当我们运行npm run serve时，其实运行的是./node_modules/.bin/vue-cli-service 脚本。那么./node_modules/.bin/vue-cli-service 脚本怎么来的呢？其实./node_modules