npm run xxx 的打工之旅，它到底干了什么？

note

每当我们运行 npm run xxx 的时候，我都看着他它在辛勤的劳作，然后等待着收获，并没有关心过npm run 之后到底做了什么怎么做的，怎么有点像无良____ ;现在我们来体现一下对员工的关怀吧

1、以Vue CLI脚手架创建的Vue项目的npm run serve为例

• npm run serve中的 server 是哪里来的你还记得吗？没错就是在项目文件夹下package.json文件中scripts里的serve键名，所以npm run serve 其实是运行键名serve中对应的值，如下：

{  "name": "test",  "version": "0.1.0",  "private": true,  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",  },

npm run serve 最后执行的就是 vue-cli-service serve npm run build 最后执行的就是 vue-cli-service build

2、那么同样是找人打工为什么不直接找 vue-cli-service serve来打工呢？

• 
• 没错如你所见报错了：“vue-cli-service”不被识别为 cmdlet、函数、脚本文件或可执行程序的名称。”

3、凭啥呢？我找你你不干，我让npm找你，你屁颠屁颠的就干上了？

• 我们安装这些依赖包的时候是通过npm istall 来执行的,比如npm i @vue/cli-service
• 安装后我们发现node_modules/.bin/目录中创建好几个vue-cli-service相关的可执行文件（脚本）
  • 而在脚本中明确指向了安装在node_modules中的cli-service具体位置，与实际安装位置建立软连接
    • 
• 因此我们在项目文件夹下直接运行vue-cli-service serve时是找不到vue-cli-service 这个命令的
  • 通过npm run 的时候他就会找到自己创建的软链接映射目录，再根据映射关系找到具体执行的内容；
  • 如果你实在想直接对vue-cli-service发号施令也可以自行到软链接目录./node_modules/.bin/vue-cli-service serve去执行执行；
  • 或者通过 npx vue-cli-service serve 直接运行。