インタビュアー: npm が xxx を実行すると何が起こりましたか?話し始めてください！

面接官が、npm run xxx を実行すると何が起こったかを尋ねたら、どう答えますか?次の記事では、面接の体験談と著者の答え方を紹介していますので、ぜひ参考にしてください。

物事は次のようなものです。直接話しましょう

インタビュアー: npm が xxx を実行すると何が起こりましたか?詳細であればあるほど良いです。

私 (思考的、単純): まず、DNS 解決を行い、ドメイン名を IP アドレスに解決します。 TCP 接続、TCP スリーウェイ ハンドシェイク...

インタビュアー: やめて、URL 入力からページ表示までに何が起こるかを聞いているわけではありません。 、npm が xxx を実行すると何が起こったか。

私 (恥ずかしくて、反射的に質問だと思いました): うーん、npm で xxx を実行するときに、最初にプロジェクトの package.json ファイルに移動することを覚えています。スクリプト内で対応する xxx を見つけて、xxx​​ のコマンドを実行します。たとえば、vue プロジェクト npm runserve を起動すると、実際には vue-cli-serviceserve コマンドが実行されます。 (幸運なことに、私はこの常識をまだ理解しています)

package.json ファイル

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

インタビュアー: そうですね、悪くないです。それなら直接実行してみてはいかがでしょうかvue-cli-serviceserveしかし、npm runserve を実行するとどうなるでしょうか?

私 (ためらっています): うーん、npm runserve の方が短くて書きやすいからです。

インタビュアー: もう一度考えてください。

私 (ああ?そうですよね? はい、思い出しました): vue-cli-serviceserve を直接実行すると、エラーが報告されるためです。 vue-cli-serviceこの手順

インタビュアー: ああ、はい、はい、はい、はい、はい、ヨーヨーウェスト！

私 (ふふ、しっかりしてる、今度は 30,000 欲しい): ふふふ！

インタビュアー:

vue-cli-service このコマンドはオペレーティング システムに存在しないため、なぜ npm runserve## を実行するのですか? #、これは vue-cli-serviceserve を実行するのと同じですが、なぜ成功するのに、コマンドが存在しないというエラーが報告されないのでしょうか? 私 (え？サメをあげてみませんか。無理に答えたくないのですが): ごめんなさい、まだ理解できていません。

インタビュアー: えーっと、わかりました、それは問題ではありません。次のアルゴリズムの質問をしましょう:....

....

以下は関係ありませんこの記事へ 内容は省略されています。

面接官: はい、これで面接は終了です。面接結果は 1 週間以内にご返信いたします

ピーピーピー...(電話を切る)

# ＃＃良い。クールなようです。

npm runserve

を実行すると成功し、コマンドが存在しないというエラーが報告されないのはなぜですか?

私はすぐに上司の友人にこのプロセスで何が起こったのか尋ねました

#いくつかの議論の後、ついに答えを見つけました。

負けを認めたくない私は、すぐに面接官の電話番号に掛け直しました。

私: こんにちは、インタビュアーさん、答えが見つかりました。もう一度聞いていただけますか?

インタビュアー: はい、はい、お話しください。

私: 依存関係をインストールするとき、npm i xxx を通じて実行します。たとえば、

npm i @vue/cli-service

、npm がこの依存関係をインストールすると、いくつかの実行可能ファイルが作成されます。

vue-cli-service

という名前のファイルが node_modules/.bin/ ディレクトリに作成されました。

.bin ディレクトリ。このディレクトリは npm パッケージではありません。ディレクトリ内のファイルはソフト リンクであることを示しており、ファイルを開くと、ファイルの先頭に

#!/bin/sh と書かれており、これがスクリプトであることがわかります。

これから、vue-cli-service# は実行されませんが、npm runserve

を使用して

vue-cli-serviceserve を実行することがわかります。 ## グローバル コマンドがインストールされていますが、npm は ./node_modules/.bin で vue-cli-service ファイルを見つけてスクリプトとして実行します。これは ## を実行するのと同じです。 #. /node_modules/.bin/vue-cli-serviceserve (最後のサーブはパラメータとして渡されます)。 <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="164999006926942インタビュアー: npm が xxx を実行すると何が起こりましたか?話し始めてください！" alt="インタビュアー: npm が xxx を実行すると何が起こりましたか?話し始めてください！"/></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 教程！