面試官：npm run xxx時發生了啥？請開講！-頭條-PHP中文網

當面試官問你執行 npm run xxx 發生了什麼事時，你要怎麼回答？以下這篇文章跟大家分享一次面試經歷，看看作者是怎麼回答的，希望對大家有幫助！

事情是這樣的，直接開講

面試官：npm run xxx的時候，發生了什麼事？講的越詳細越好。

我（心想，簡單啊）：首先，DNS 解析,將網域名稱解析成 IP 位址，然後 TCP 連線,TCP 三次握手...

面試官：停停，我問的不是從URL輸入到頁面展現到底發生什麼事？，是npm run xxx的時候，發生了什麼事。

面試官：npm run xxx時發生了啥？請開講！

我（尷尬，條件反射地以為是問的八股文）：emmmm，我記得npm run xxx的時候，首先會去專案的package.json檔案裡找scripts 裡找對應的xxx，然後執行xxx的指令，例如啟動vue專案npm run serve的時候，其實就是執行了vue-cli-service serve 這條指令。 (好險，幸好這點常識我還是懂的)

package.json文件

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

登入後複製

面試官：嗯，不錯，那為什麼不直接執行vue-cli-service serve而要執行npm run serve 呢？

我（支支吾吾）：emm，因為 npm run serve 比較短，比較好寫。

面試官：npm run xxx時發生了啥？請開講！

面試官：你再想想。

我（啊？不對嗎，對哦，我想起來了）：因為直接執行vue-cli-service serve，會報錯，因為作業系統中沒有存在 vue-cli-service這條指令

面試官：npm run xxx時發生了啥？請開講！

#面試官：哦，對對對，不錯不錯，喲西喲西！

我（嘿嘿，穩了，這次我要30k）: 嘻嘻！

面試官：npm run xxx時發生了啥？請開講！

面試官：那既然vue-cli-service這條指令不存在作業系統中，為什麼執行npm run serve的時候，也就是相當於執行了vue-cli-service serve ，為什麼這樣它就能成功，而且不報指令不存在的錯誤呢？

我（啊？要不你還是把我鯊了吧，不想再勉強作回答）：不好意思，這個我還沒了解過。

面試官：emmm，好吧，沒關係，我們做下一道演算法題吧：....

....

後面無關這篇文章的內容，就省略過了。

面試官:好的，這裡面試到此結束，我們會在一週內回覆您的面試結果

嗶聲...（電話掛斷）

唉。看來是涼了

為什麼執行npm run serve的時候，這樣它就能成功，而且不報指令不存在的錯誤呢？

我趕緊問了大佬朋友這一過程到底是發生了什麼

面試官：npm run xxx時發生了啥？請開講！

#經過一番討論，終於找到了答案。

不服輸的我，趕緊回撥了面試官的電話號碼。

我：餵，面試官，您好，我已經找到答案了，可以麻煩您再聽一下嗎？

面試官：嗯，可以啊，請講。

我：我們在安裝依賴的時候，是透過npm i xxx 來執行的，例如npm i @vue/cli-service，npm 在安裝這個依賴的時候，就會node_modules/.bin/ 目錄中建立好vue-cli-service 為名的幾個可執行檔了。

面試官：npm run xxx時發生了啥？請開講！

.bin 目錄，這個目錄不是任何一個 npm 套件。目錄下的文件，表示這是一個個軟鏈接，打開文件可以看到文件頂部寫著 #!/bin/sh ，表示這是腳本。

由此我們可以知道，當使用npm run serve 執行vue-cli-service serve 時，雖然沒有安裝vue-cli-service的全域指令，但是npm 會到./node_modules/.bin 中找到vue-cli-service 檔案作為腳本來執行，則相當於執行了. /node_modules/.bin/vue-cli-service serve（最後的serve 作為參數傳入）。

面试官：可以啊，真不错，但是我还想继续问问，你说.bin 目录下的文件表示软连接，那这个bin目录下的那些软连接文件是哪里来的呢？它又是怎么知道这条软连接是执行哪里的呢？

我（窃喜，这个我们刚刚也讨论了）：我们可以直接在新建的vue项目里面搜索vue-cli-service

面試官：npm run xxx時發生了啥？請開講！

可以看到，它存在项目最外层的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 文件加入到全局，比如 create-react-app 和 vue-cli ，在全局安装后，就可以直接使用如 vue-cli projectName 这样的命令来创建项目了。

面试官：搜噶，也就是说，npm i 的时候，npm 就帮我们把这种软连接配置好了，其实这种软连接相当于一种映射，执行npm run xxx 的时候，就会到 node_modules/bin中找对应的映射文件，然后再找到相应的js文件来执行。

我（疯狂点头）：嗯嗯，是的，就是这样

面试官：我有点好奇。刚刚看到在node_modules/bin中有三个vue-cli-service文件。为什么会有三个文件呢？

面試官：npm run xxx時發生了啥？請開講！

我：如果我们在 cmd 里运行的时候，windows 一般是调用了 vue-cli-service.cmd，这个文件，这是 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" %*

登入後複製

所以当我们运行vue-cli-service serve这条命令的时候，就相当于运行 node_modules/.bin/vue-cli-service.cmd serve。

然后这个脚本会使用 node 去运行 vue-cli-service.js这个 js 文件

由于 node 中可以使用一系列系统相关的 api ，所以在这个 js 中可以做很多事情，例如读取并分析运行这条命令的目录下的文件，根据模板生成文件等。

# unix 系默认的可执行文件，必须输入完整文件名
vue-cli-service

# windows cmd 中默认的可执行文件，当我们不添加后缀名时，自动根据 pathext 查找文件
vue-cli-service.cmd

# Windows PowerShell 中可执行文件，可以跨平台
vue-cli-service.ps1

登入後複製

面试官：原来如此，不错嘛小伙子，短短时间内就掌握清楚了，看来学习能力很强，不错不错，我很看好你，我会催hr尽快回复你的。先这样了，拜拜

我（欣喜若狂，功夫不负有心人啊）：好啊，好啊，拜拜

哔哔哔...（电话挂断）

过了三十分钟....

今天是个好日子,心想的事儿都能成,今天是个好日子,打开了家门咱迎春风...(手机铃声响起)。

我：喂，您好。

hr：您好，我是xxx公司的hr，根据你面试的优秀表现，恭喜你获得了我司的offer，经过我最大的努力，我给你争取到了最大的薪资，薪资是月薪3500，您看满意吗？

我：....

哔哔哔....(电话挂断)

tmd，c

1面試官：npm run xxx時發生了啥？請開講！