Penemubual: Apa yang berlaku apabila npm menjalankan xxx? Sila mula bercakap!

Apabila penemuduga bertanya kepada anda apa yang berlaku semasa berlari npm run xxx, bagaimanakah anda bertindak balas? Artikel berikut akan berkongsi dengan anda pengalaman temu bual dan melihat bagaimana penulis menjawab, saya harap ia akan membantu anda!

Perkaranya begini, bila kita bercakap terus

Penemuduga: npm run xxx, apa jadi? Lebih terperinci ia, lebih baik.

Saya (berfikir, mudah): Pertama, resolusi DNS, selesaikan nama domain menjadi alamat IP, dan kemudian Sambungan TCP, jabat tangan tiga hala TCP...

Penemuduga: Berhenti, saya tidak bertanya apa yang berlaku daripada input URL ke paparan halaman? , apa yang berlaku apabila ia npm run xxx.

Saya (malu, secara refleks menyangka itu adalah soalan): emmmm, saya masih ingat apabila npm menjalankan xxx, saya mula-mula pergi ke fail package.json projek Cari xxx yang sepadan dalam skrip, dan kemudian laksanakan arahan xxx Contohnya, apabila memulakan projek vue npm run serve, perintah vue-cli-service sebenarnya dilaksanakan. (Alangkah besarnya risikonya, nasib baik saya masih tahu sedikit akal ini)

fail package.json

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

Pewawancara: Baiklah, kenapa tidak laksanakan ia secara langsung vue-cli-service serveDan bagaimana pula dengan melaksanakan npm run serve?

Saya (teragak-agak): emm, kerana npm run serve lebih pendek dan lebih mudah untuk ditulis.

Penemuduga: Fikir semula.

Saya (Hah? Betul tak? Ya, saya ingat): Kerana jika saya melaksanakan vue-cli-service serve secara langsung, ralat akan dilaporkan kerana arahan vue-cli-service tidak wujud dalam sistem pengendalian

Penemuduga: Oh, ya, ya, ya, ya, ya, ya, ya, ya!

Saya (hehe, steady, nak 30k kali ni): Hee hee!

Pewawancara: Memandangkan perintah vue-cli-service tidak wujud dalam sistem pengendalian, mengapa apabila npm run serve dilaksanakan, ia bersamaan dengan melaksanakan vue-cli-service serve ? Mengapa ia boleh berjaya tanpa melaporkan ralat bahawa arahan itu tidak wujud?

Saya (Hah? Kenapa awak tidak beri saya ikan jerung? Saya tidak mahu memaksa diri saya untuk menjawab lagi): Maaf, saya belum faham lagi.

Penemuduga: emmm, okay, tak apa, jom buat soalan algoritma seterusnya:....

....

Yang berikut tidak berkaitan kepada artikel ini. Kandungan telah ditinggalkan.

Penemuduga: Okey, ini adalah penghujung temuduga Kami akan membalas anda dengan keputusan temuduga dalam masa seminggu

Beep beep beep...(tutup telefon)

Aduhai. Nampaknya keren.

Mengapakah ia berjaya apabila melaksanakan

tanpa melaporkan ralat bahawa arahan itu tidak wujud? npm run serve

Saya segera bertanya kepada rakan bos saya apa yang berlaku dalam proses ini

Selepas beberapa perbincangan, akhirnya saya menemui jawapannya.

Tidak mahu mengaku kalah, saya cepat-cepat menghubungi semula nombor telefon penemuduga.

Saya: Hello, penemuduga, saya telah menemui jawapannya. Bolehkah anda mendengarnya semula?

Penemuduga: Ya, ya, sila bercakap.

Saya: Apabila kami memasang kebergantungan, kami melakukannya melalui npm i xxx, contohnya

, apabila npm memasang kebergantungan ini, ia akan mencipta npm i @vue/cli-service dalam direktori node_modules/.bin/ kerana Terdapat beberapa boleh laku fail bernama. vue-cli-service

.direktori bin, direktori ini bukan sebarang pakej npm. Fail dalam direktori menunjukkan bahawa ia adalah pautan lembut Apabila anda membuka fail, anda boleh melihat

ditulis di bahagian atas fail, menunjukkan bahawa ia adalah skrip. #!/bin/sh

Daripada ini kita boleh tahu bahawa apabila menggunakan

untuk melaksanakan npm run serve, walaupun arahan global vue-cli-service  serve tidak dipasang, npm akan mencari fail vue-cli-service dalam ./node_modules/.bin dan melaksanakannya sebagai skrip , ia bersamaan dengan melaksanakan vue-cli-service (layanan terakhir dihantar sebagai parameter). ./node_modules/.bin/vue-cli-service serve

面试官：可以啊，真不错，但是我还想继续问问，你说.bin 目录下的文件表示软连接，那这个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 的时候，就会到 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 教程！