建站
咨詢
售后
建站咨詢
新聞中心
事情是這樣的，直接開講
我(心想，簡(jiǎn)單啊)：首先，DNS 解析,將域名解析成 IP 地址，然后 TCP 連接,TCP 三次握手...
面試官：停停，我問的不是從URL輸入到頁面展現(xiàn)到底發(fā)生什么?，是npm run xxx的時(shí)候，發(fā)生了什么。
我(尷尬，條件反射地以為是問的八股文)：emmmm，我記得 npm run xxx的時(shí)候，首先會(huì)去項(xiàng)目的package.json文件里找scripts 里找對(duì)應(yīng)的xxx，然后執(zhí)行 xxx的命令，例如啟動(dòng)vue項(xiàng)目 npm run serve的時(shí)候，實(shí)際上就是執(zhí)行了vue-cli-service serve 這條命令。(好險(xiǎn)，幸好這點(diǎn)常識(shí)我還是懂的)。
「package.json文件」
{
"name": "h5",
"version": "1.0.7",
"private": true,
"scripts": {
"serve": "vue-cli-service serve"
},
}
面試官：嗯，不錯(cuò)，那 為什么 不直接執(zhí)行vue-cli-service serve而要執(zhí)行npm run serve 呢?
我(支支吾吾)：emm，因?yàn)?npm run serve 比較簡(jiǎn)短，比較好寫。
面試官：你再想想。
我(啊?不對(duì)嗎，對(duì)哦，我想起來了)：因?yàn)?直接執(zhí)行vue-cli-service serve，會(huì)報(bào)錯(cuò)，因?yàn)椴僮飨到y(tǒng)中沒有存在vue-cli-service這一條指令。
面試官：哦，對(duì)對(duì)對(duì)，不錯(cuò)不錯(cuò)，喲西喲西!
我(嘿嘿，穩(wěn)了，這次我要30k): 嘻嘻!
面試官：那既然vue-cli-service這條指令不存在操作系統(tǒng)中，為什么執(zhí)行npm run serve的時(shí)候，也就是相當(dāng)于執(zhí)行了vue-cli-service serve ，為什么這樣它就能成功，而且不報(bào)指令不存在的錯(cuò)誤呢?
我(啊?要不你還是把我鯊了吧，不想再勉強(qiáng)作回答)：不好意思，這個(gè)我還沒了解過。
面試官：emmm，好吧，沒關(guān)系，我們做下一道算法題吧：....
....
后面無關(guān)此次文章的內(nèi)容，就省略過了。
面試官:好的，此處面試到此結(jié)束，我們會(huì)在一周內(nèi)回復(fù)您的面試結(jié)果。
嗶嗶嗶...(電話掛斷)。
唉。看來是涼了。
為什么執(zhí)行npm run serve的時(shí)候，這樣它就能成功，而且不報(bào)指令不存在的錯(cuò)誤呢?
我趕緊問問了大佬朋友這一過程到底是發(fā)生了什么？
經(jīng)過一番討論，終于找到了答案。
不服輸?shù)奈遥s緊回?fù)芰嗣嬖嚬俚碾娫捥?hào)碼。
我：喂，面試官，您好，我已經(jīng)找到答案了，可以麻煩您再聽一下嗎?
面試官：嗯，可以啊，請(qǐng)講。
我：我們?cè)诎惭b依賴的時(shí)候，是通過npm i xxx 來執(zhí)行的，例如 npm i @vue/cli-service，npm 在 安裝這個(gè)依賴的時(shí)候，就會(huì)node_modules/.bin/ 目錄中創(chuàng)建 好vue-cli-service 為名的幾個(gè)可執(zhí)行文件了。
.bin 目錄，這個(gè)目錄不是任何一個(gè) npm 包。目錄下的文件，表示這是一個(gè)個(gè)軟鏈接，打開文件可以看到文件頂部寫著 #!/bin/sh ，表示這是一個(gè)腳本。
由此我們可以知道，當(dāng)使用 npm run serve 執(zhí)行 vue-cli-service serve 時(shí)，雖然沒有安裝 vue-cli-service的全局命令，但是 npm 會(huì)到 ./node_modules/.bin 中找到 vue-cli-service 文件作為 腳本來執(zhí)行，則相當(dāng)于執(zhí)行了 ./node_modules/.bin/vue-cli-service serve(最后的 serve 作為參數(shù)傳入)。
面試官：可以啊，真不錯(cuò)，但是我還想繼續(xù)問問，你說.bin 目錄下的文件表示軟連接，那這個(gè)bin目錄下的那些軟連接文件是哪里來的呢?它又是怎么知道這條軟連接是執(zhí)行哪里的呢?
我(竊喜，這個(gè)我們剛剛也討論了)：我們可以直接在新建的vue項(xiàng)目里面搜索vue-cli-service
可以看到，它存在項(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 目錄下，而 npm 還會(huì)自動(dòng)把node_modules/.bin加入$PATH，這樣就可以直接作為命令運(yùn)行依賴程序和開發(fā)依賴程序，不用全局安裝了。
假如我們?cè)诎惭b包時(shí)，使用 npm install -g xxx 來安裝，那么會(huì)將其中的 bin 文件加入到全局，比如 create-react-app 和 vue-cli ，在全局安裝后，就可以直接使用如 vue-cli projectName 這樣的命令來創(chuàng)建項(xiàng)目了。
面試官：搜噶，也就是說，npm i 的時(shí)候，npm 就幫我們把這種軟連接配置好了，其實(shí)這種軟連接相當(dāng)于一種映射，執(zhí)行npm run xxx 的時(shí)候，就會(huì)到 node_modules/bin中找對(duì)應(yīng)的映射文件，然后再找到相應(yīng)的js文件來執(zhí)行。
我(瘋狂點(diǎn)頭)：嗯嗯，是的，就是這樣。
面試官：我有點(diǎn)好奇。剛剛看到在node_modules/bin中 有三個(gè)vue-cli-service文件。為什么會(huì)有三個(gè)文件呢?
我：如果我們?cè)?cmd 里運(yùn)行的時(shí)候，windows 一般是調(diào)用了 vue-cli-service.cmd，這個(gè)文件，這是 windows 下的批處理腳本：
@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0
IF EXIST "%dp0%\node.exe" (
SET "_prog=%dp0%\node.exe"
) ELSE (
SET "_prog=node"
SET PATHEXT=%PATHEXT:;.JS;=;%
)
endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\@vue\cli-service\bin\vue-cli-service.js" %*
所以當(dāng)我們運(yùn)行vue-cli-service serve這條命令的時(shí)候，就相當(dāng)于運(yùn)行 node_modules/.bin/vue-cli-service.cmd serve。
然后這個(gè)腳本會(huì)使用 node 去運(yùn)行 vue-cli-service.js這個(gè) js 文件。
由于 node 中可以使用一系列系統(tǒng)相關(guān)的 api ，所以在這個(gè) js 中可以做很多事情，例如讀取并分析運(yùn)行這條命令的目錄下的文件，根據(jù)模板生成文件等。
# unix 系默認(rèn)的可執(zhí)行文件，必須輸入完整文件名
vue-cli-service
# windows cmd 中默認(rèn)的可執(zhí)行文件，當(dāng)我們不添加后綴名時(shí)，自動(dòng)根據(jù) pathext 查找文件
vue-cli-service.cmd
# Windows PowerShell 中可執(zhí)行文件，可以跨平臺(tái)
vue-cli-service.ps1
面試官：原來如此，不錯(cuò)嘛小伙子，短短時(shí)間內(nèi)就掌握清楚了，看來學(xué)習(xí)能力很強(qiáng)，不錯(cuò)不錯(cuò)，我很看好你，我會(huì)催h(yuǎn)r盡快回復(fù)你的。先這樣了，拜拜。
我(欣喜若狂，功夫不負(fù)有心人啊)：好啊，好啊，拜拜。
嗶嗶嗶...(電話掛斷)。
過了三十分鐘....
今天是個(gè)好日子,心想的事兒都能成,今天是個(gè)好日子,打開了家門咱迎春風(fēng)...(手機(jī)鈴聲響起)。
我：喂，您好。
hr：您好，我是xxx公司的hr，根據(jù)你面試的優(yōu)秀表現(xiàn)，恭喜你獲得了我司的offer，經(jīng)過我最大的努力，我給你爭(zhēng)取到了最大的薪資，薪資是月薪3500，您看滿意嗎?
我：....
嗶嗶嗶....(電話掛斷)。
總結(jié)
- 運(yùn)行 npm run xxx的時(shí)候，npm 會(huì)先在當(dāng)前目錄的 node_modules/.bin 查找要執(zhí)行的程序，如果找到則運(yùn)行;
- 沒有找到則從全局的 node_modules/.bin 中查找，npm i -g xxx就是安裝到到全局目錄;
- 如果全局目錄還是沒找到，那么就從 path 環(huán)境變量中查找有沒有其他同名的可執(zhí)行程序。
參考文章
https://blog./u_15077533/4531157
https://juejin.cn/post/6971723285138505765
新聞名稱：三面面試官：運(yùn)行NpmRunxxx的時(shí)候發(fā)生了什么？
轉(zhuǎn)載注明：http://www.5511xx.com/article/cdeejcj.html
