深入解析 npm run 命令的执行原理与底层机制

引言

直接切入主题。

面试官提问：在执行 npm run xxx 命令时，系统内部具体经历了哪些步骤？请尽可能详细地阐述。

我的初步反应（内心独白）：这很简单嘛，首先进行 DNS 解析，将域名转换为 IP 地址，接着建立 TCP 连接，完成三次握手……

面试官打断：停一下，我问的不是从输入 URL 到页面渲染的全过程，而是执行 npm run xxx 时的具体行为。

我的回答（意识到误解）：明白了。执行 npm run xxx 时，npm 会读取项目根目录下的 package.json 文件，定位到 scripts 字段中对应的 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 npm run serve 来执行呢？

我的回答：因为 npm run serve 命令较短，书写更为便捷。

面试官追问：请再深入思考一下。

我的回答：直接执行 vue-cli-service serve 会报错，因为操作系统的全局指令集中不存在 vue-cli-service 这一命令。

面试官表示认可：没错，回答得很好。

我的心理活动：看来稳了，这次面试应该能拿到 30k 的薪资。

面试官继续提问：既然 vue-cli-service 命令在操作系统中不存在，为什么执行 npm run serve（即相当于执行 vue-cli-service serve）时却能成功运行，且不会提示命令不存在呢？

我的回答：抱歉，这部分机制我尚未深入了解。

面试官：好吧，没关系，我们继续下一道算法题。

…

后续无关内容省略。

面试官：好的，面试到此结束，我们会在一周内通知您结果。

（电话挂断的声音）

唉，看来这次面试失败了。

核心疑问：为什么执行 npm run serve 时能够成功，且不报指令不存在的错误？

我立即向技术大佬请教了这一过程的具体原理。

经过深入探讨，终于找到了答案。

不服输的我，立即回拨了面试官的电话。

我：面试官您好，我已经查明了答案，能否请您再听我解释一下？

面试官：可以，请讲。

我：在安装依赖时，我们通常使用 npm i xxx 命令，例如 npm i @vue/cli-service。npm 在安装该依赖时，会在 node_modules/.bin/ 目录下创建名为 vue-cli-service 的可执行文件。

.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 目录下的这些软链接文件是如何生成的？系统又是如何知道这些软链接指向哪个具体文件的？

我的回答：我们可以直接在新建的 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 文件会被添加到全局环境。例如 create-react-app 和 vue-cli，在全局安装后，就可以直接使用如 vue-cli projectName 这样的命令来创建项目。

面试官总结：也就是说，执行 npm i 时，npm 会自动配置好这些软链接。这种软链接本质上是一种映射关系。执行 npm run xxx 时，npm 会去 node_modules/bin 中查找对应的映射文件，进而找到相应的 js 文件来执行。

我：是的，完全正确。

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

我的回答：如果在 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，您看满意吗？

我：……

（电话挂断的声音）

总结

执行 npm run xxx 时，npm 首先在当前目录的 node_modules/.bin 中查找要执行的程序，若找到则直接运行；

若未找到，则从全局的 node_modules/.bin 中查找（npm i -g xxx 即为安装到全局目录）；

若全局目录仍未找到，则从 path 环境变量中查找是否有其他同名的可执行程序。参考文章

参考

https://www.jb51.net/article/254142.htm

https://www.jb51.net/article/254129.htm

以上就是前端面试运行npm run xxx发生过程原理解析的详细内容，更多关于运行npm run xxx原理的资料请关注本站其它相关文章！