Interviewer: What happened when npm run xxx? Please start speaking!

When the interviewer asks you what happened when you run npm run xxx, how do you answer? The following article will share with you an interview experience and see how the author answered. I hope it will be helpful to you!

The thing is like this, let’s talk directly

Interviewer: What happened when npm run xxx? The more detailed it is, the better.

Me (thinking, simple): First, DNS resolution, resolve the domain name into an IP address, and then TCP connection, TCP three-way handshake...

Interviewer: Stop, I’m not asking what happens from URL input to page display? , what happened when npm run xxx.

Me (embarrassed, reflexively thought it was a question): emmmm, I remember that when npm run xxx, I will first go to the package.json file of the project. Find the corresponding xxx in scripts, and then execute the command of xxx. For example, when starting the vue project npm run serve, the command vue-cli-service serve is actually executed. (Good luck, luckily I still understand this bit of common sense)

package.json file

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

Interviewer: Well, not bad, then why not execute it directlyvue-cli-service serveBut what about executing npm run serve?

Me (hesitating): emm, because npm run serve is shorter and easier to write.

Interviewer: Think again.

Me (ah? Isn’t that right? Yes, I remembered it): Because if I execute vue-cli-service serve directly, an error will be reported because does not exist in the operating system. vue-cli-serviceThis instruction

Interviewer: Oh, yes, yes, yes, yes, yes, yo yo West!

Me (hehe, steady, I want 30k this time): Hee hee!

Interviewer: Since vue-cli-service this command does not exist in the operating system, why execute npm run serve## When #, it is equivalent to executing vue-cli-service serve. Why can it succeed and not report an error that the command does not exist?

Me (Huh? Why don't you just give me a shark, I don't want to force myself to answer): Sorry, I haven't understood this yet.

Interviewer: emmm, okay, it doesn’t matter, let’s do the next algorithm question:....

....

The following is not relevant to this article The content has been omitted.

Interviewer: Okay, this is the end of the interview. We will reply to your interview results within a week

Beep beep beep...(hang up the phone)

well. It seems to be cool

Why does it succeed when executing

npm run serve and does not report an error that the command does not exist?

I quickly asked my big boss friend what happened in this process

After some discussion, I finally found the answer.

Unwilling to admit defeat, I quickly called back the interviewer’s phone number.

Me: Hello, interviewer, I have found the answer. Can you please listen to it again?

Interviewer: Yes, yes, please speak.

Me: When we install dependencies, we execute them through npm i xxx. For example,

npm i @vue/cli-service, when npm installs this dependency, it will Several executable files named vue-cli-service have been created in the node_modules/.bin/ directory.

.bin directory, this directory is not any npm package. The files in the directory indicate that they are soft links. When you open the file, you can see

#!/bin/sh written at the top of the file, indicating that it is a script.

From this we can know that when using

npm run serve to execute vue-cli-service serve, although vue-cli-service# is not installed ## global command, but npm will find the vue-cli-service file in ./node_modules/.bin and execute it as a script, which is equivalent to executing . /node_modules/.bin/vue-cli-service serve (the last serve is passed in as a parameter). <p>面试官：可以啊，真不错，但是我还想继续问问，你说.bin 目录下的文件表示软连接，那这个bin目录下的那些软连接文件是哪里来的呢？它又是怎么知道这条软连接是执行哪里的呢？</p><p>我（窃喜，这个我们刚刚也讨论了）：我们可以直接在新建的vue项目里面搜索vue-cli-service</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/436/923/317/1649990074656960.png" class="lazy" title="164999006926942Interviewer: What happened when npm run xxx? Please start speaking!" alt="Interviewer: What happened when npm run xxx? Please start speaking!"/></p><p>可以看到，它存在项目最外层的<strong>package-lock.json</strong>文件中</p><p>从 package-lock.json 中可知，当我们npm i 整个新建的vue项目的时候，npm 将 bin/vue-cli-service.js 作为 bin 声明了。</p><p>所以在 npm install 时，npm 读到该配置后，就将该文件软链接到 ./node_modules/.bin 目录下，而 npm 还会自动把node_modules/.bin加入$PATH，这样就可以直接作为命令运行依赖程序和开发依赖程序，不用全局安装了。</p><p>假如我们在安装包时，使用 <code>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文件。为什么会有三个文件呢？

我：如果我们在 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

总结

• 运行 npm run xxx的时候，npm 会先在当前目录的 node_modules/.bin 查找要执行的程序，如果找到则运行；

• 没有找到则从全局的 node_modules/.bin 中查找，npm i -g xxx就是安装到到全局目录；

• 如果全局目录还是没找到，那么就从 path 环境变量中查找有没有其他同名的可执行程序。

原文地址：https://juejin.cn/post/7078924628525056007

作者：阳光是sunny

更多node相关知识，请访问：nodejs 教程！