一、運(yùn)行npm run xxx的時(shí)候發(fā)生了什么

https://juejin.cn/post/7078924628525056007

package.json文件

執(zhí)行 npm run xxx 的時(shí)候，首先會(huì)去項(xiàng)目的 package.json 文件里找script里找對(duì)應(yīng)的xxx，然后執(zhí)行xxx 的命令

例如：?jiǎn)?dòng)vue項(xiàng)目npm run serve的時(shí)候，實(shí)際上就是執(zhí)行了vue-cli-service serve 這條命令。

// package.json文件

{

? "name": "h5",

? "version": "1.0.7",

? "private": true,

? "scripts": {

? ? "serve": "vue-cli-service serve"

? },

}

為什么不直接執(zhí)行vue-cli-service serve

因?yàn)?直接執(zhí)行 vue-cli-service serve，會(huì)報(bào)錯(cuò)，因?yàn)椴倏v系統(tǒng)中沒(méi)有存在 vue-cli-service 這條指令

我們?cè)诎惭b依賴的時(shí)候，通過(guò) npm i xxx 來(lái)執(zhí)行，例如 npm i @vue/cli-serve ，npm在安裝這個(gè)依賴的時(shí)候，就會(huì)在 node_modules/.bin/ 目錄中創(chuàng)建好 vue-cli-service ? 為名的幾個(gè)可執(zhí)行文件了? ? ?

.bin 目錄，這個(gè)目錄不是任何一個(gè)npm包。目錄下的文件，表示這是一個(gè)個(gè)軟連接，打開(kāi)文件可以看到文件頂部寫著 #!/bin/sh， 表示這是一個(gè)腳本

由此知道，當(dāng)使用 npm run serve 執(zhí)行 vue-cli-service serve 時(shí)，雖然沒(méi)有安裝 vue-cli-service 的全局命令，但是npm 會(huì)到 ./node_modules/.bin 中找到 vue-cli-service文件作為腳本來(lái)執(zhí)行，則相當(dāng)于執(zhí)行了 ./node_modules/.bin/vue-cli-service serve（最后的serve作為參數(shù)傳入）

軟連接文件是哪里來(lái)的呢？

可以看到，它存在項(xiàng)目最外層的 package-lock.json文件中

從 package-lock.json 中可知，當(dāng)我們npm i 整個(gè)新建的vue項(xiàng)目的時(shí)候，npm 將 bin/vue-cli-service.js 作為 bin 聲明了。

所以在 npm install 時(shí)，npm 讀到該配置后，就將該文件軟鏈接到 ./node_modules/.bin 目錄下

為何node_modules/bin中有三個(gè)vue-cli-service文件

如果我們?cè)?cmd 里運(yùn)行的時(shí)候，windows 一般是調(diào)用了 vue-cli-service.cmd，這個(gè)文件

總結(jié)

運(yùn)行 npm run xxx的時(shí)候，npm 會(huì)先在當(dāng)前目錄的 node_modules/.bin 查找要執(zhí)行的程序，如果找到則運(yùn)行；

沒(méi)有找到則從全局的 node_modules/.bin 中查找，npm i -g xxx就是安裝到到全局目錄；

如果全局目錄還是沒(méi)找到，那么就從 path 環(huán)境變量中查找有沒(méi)有其他同名的可執(zhí)行程序。