npm run xxx的时候经历了什么

8/16/2022 Vue

在npm run xxx的时候，首先会在项目里的package.json文件里找scripts里找到对应的xxx，然后执行xxx的命令，例如启动vue项目npm run server的时候，世纪上就是执行了vue-cli-service serve这条命令。

{
    "name": "h5",
    "version": "1.0.7",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve"
    }, 
}

1
2
3
4
5
6
7
8

那为什么不直接执行vue-cli-service serve而要执行npm run serve呢？

那既然vue-cli-service这条指令不存在操作系统中，为什么执行npm run serve的时候，也就是相当于执行了vue-cli-service serve ，为什么这样它就能成功，而且不报指令不存在的错误呢？

我们在安装依赖的时候，是通过npm i xxx 来执行的，例如npm i @vue/cli-service,npm在安装这个依赖的时候，就会node-modules/.bin/目录中创建好vue-cli-service为名的几个可执行文件

- node-modules
    - .bin
        - vue-cli-service

1
2
3

.bin目录，这个目录不是任何一个npm包。目录下的文件，表示这是一个软链接
由此我们可以知道，当使用npm run serve 执行vue-cli-service serve时，虽然没有安装vue-cli-service的全局命令，但是npm会到./node-module/,bin中找到vue-cli-service文件作为脚本来执行，则相当于执行了./node-modules/.bin/vue-cli-service serve（serve作为参数传入）

.bin 目录下的文件表示软连接，那这个bin目录下的那些软连接文件是哪里来的呢？它又是怎么知道这条软连接是执行哪里的呢？

我们可以直接在新建的vue项目里面搜索vue-cli-service可以看到，它存在项目最外层的package-lock.json文件中
从package-lock.json可知，当我们npm i 整个新建的vue项目的时候，npm 将bin/vue-cli-service,js作为bin声明了
所以在npm install时，npm读取该配置后，就将该文件软链接到./node-modules/.bin目录下，而npm还会自动把node-modules/.bin加入$path，这样就可以直接作为命令运行依赖程序和开发依赖程序，不用全局安装。
假如我们在安装包时，使用npm install -g xxx 来安装，那么会将其中的bin文件加入到全局，不如vue-cli，在全局安装后，就可以直接使用vue-cli，来创建项目。

刚刚看到在node_modules/bin中有三个vue-cli-service文件。为什么会有三个文件呢？

：如果我们在 cmd 里运行的时候，windows 一般是调用了 vue-cli-service.cmd，这个文件，这是 windows 下的批处理脚本
所以当我们运行vue-cli-service serve这条命令的时候，就相当于运行 node_modules/.bin/vue-cli-service.cmd serve。
然后这个脚本会使用 node 去运行 vue-cli-service.js这个 js 文件