引言

在前端開發(fā)的工作當(dāng)中，使用 npm run dev 的命令啟動(dòng)本地開發(fā)環(huán)境，是再正常不過的事了。那么，當(dāng)輸入完類似 npm run xxx 的命令后，究竟是如何觸發(fā)各種構(gòu)建工具的構(gòu)建命令以及啟動(dòng) Node 服務(wù)等功能的呢？

首先我們知道，Node 作為 JavaScript 的運(yùn)行時(shí)，可以把 .js 文件當(dāng)做腳本來運(yùn)行，像這種：

node index.js

當(dāng)我們使用 npm 來管理項(xiàng)目（或者 yarn）時(shí)，會(huì)在根目錄下生成一個(gè) package.json 文件，其中的 scripts 屬性，就是用于配置 npm run xxx 命令的，比如我有如下配置：

// package.json
{
  // ...
  "scripts": {
    "start": "node ./src/index.js",
    "build": "react-scripts build",
  },
  // ...
}

當(dāng)執(zhí)行 npm start 時(shí)，對(duì)于 npm 來說，相當(dāng)于執(zhí)行 npm run start ，則映射為 scripts 屬性下的 start 命令，即

npm start
# 相當(dāng)于
npm run start
# 相當(dāng)于
node ./src/index.js

這個(gè)比較好理解，就是直接使用全局安裝的 Node 命令來執(zhí)行了 ./src 目錄下的 index.js 文件而已。

如上面類似，執(zhí)行 npm run build 即相當(dāng)于執(zhí)行 react-scripts build 命令。這個(gè)命令，是使用 create-react-app 搭建 React 項(xiàng)目時(shí)默認(rèn)配置的。與 Node 不同，react-scripts 并沒有全局安裝，怎么就能直接執(zhí)行呢？

這時(shí)我們不妨看一下，使用 create-react-app 搭建的項(xiàng)目（使用 vue-cli 搭建的項(xiàng)目也一樣），在 npm install 后，其 node_modules 目錄下面的樣子：

如圖可以看到有一個(gè) .bin 目錄，這個(gè)目錄不是任何一個(gè) npm 包。目錄下的文件，右面都有一個(gè)小箭頭（VS Code 上這樣顯示），表示這是一個(gè)軟鏈接，打開文件可以看到文件頂部寫著 #!/user/bin/env node ，表示這是一個(gè)通過使用 Node 執(zhí)行的腳本。

由此我們可以知道，當(dāng)使用 npm run build 執(zhí)行 react-scripts build 時(shí)，雖然沒有安裝 react-scripts 的全局命令，但是 npm 會(huì)到 ./node_modules/.bin 中找到 react-scripts.js 文件作為 Node 腳本來執(zhí)行，則相當(dāng)于執(zhí)行了 ./node_modules/.bin/react-scripts build（最后的 build 作為參數(shù)傳入）。

npm run build
# 相當(dāng)于
./node_modules/.bin/react-scripts build

前面說過，react-scripts 是一個(gè)軟鏈接，那么它的指向是哪里，又是怎么來的呢？

我們可以在 node_modules 目錄下，直接找到 react-scripts 包，查看其目錄結(jié)構(gòu)和 package.json 如下：

從 package.json 中可知，這個(gè)包將 ./bin/react-scripts.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 run后執(zhí)行原理的詳細(xì)內(nèi)容，更多關(guān)于npm run執(zhí)行原理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！