前端项目中运行 npm run xxx 的时候发生了什么?
前言
最近修改项目配置时,引发的疑问,在此记录一下
执行命令
当你使用npm 的时候,都应该知道 它是 node 的依赖管理器,当然也可以使用其它命令,比如常见的 pnpm/yarn/cnpm/ni ;
(我们用一种对话的方式叙述吧!突然想到这样可能更好理解,面试官简称为 面,面试者简称 我)
面 : npm run xxx的时候,发生了什么?讲的越详细越好?
我 : npm run xxx,让我想想,我们运行一下项目的时候,首先得从package.json
文件中 找script
,然后找对应得命令,当前命令执行的就是命令后面所叙述的。比如 执行npm run serve
,现在就是执行的vue-cli-service serve
package.json 文件
{
"name": "fortuanute",
"version": "1.0.7",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open"
},
}
面 : 那为什么不直接执行 vue-cli-service serve 呢?
我 : (哎!是哈,有点道理,为啥不直接执行后面的呢,难道是因为记不住?)额,因为前面的简单,容易记住啊!
面 : 你再想想!
我 : 因为 vue-cli-service serve 这条指令不存在在操作系统中,执行会报错。
面 : 那 你刚说 执行 npm run serve === vue-cli-service serve ,那执行前者为啥不报错呢?
我 : 愣住!!!( 什么玩意儿 ,我想想)
当 npm 运行 vue-cli-service serve时
这条命令,会先在 node_modules/.bin
下面找找有没有同名的可执行文件,如果有,则运行当前文件。让我们打开目录看看
我们在安装依赖的时候,通过 npm install xxx
来执行,就会在 node_modules/.bin/
中创建几个与安装包同名的可执行文件了。
由此我们知道,当用 npm run serve
执行 vue-cli-service serve
时,虽然没有安装 vue-cli-service serv
e 命令,但是 npm 会在 .node_modules/.bin 中找到 vue-cli-service
文件作为脚本来执行,所以 npm run serve
就相当于执行了 .node_modules/.bin/vue-cli-service serve,
那如上图,我们有三个同名文件,怎么判断运行的哪一个呢?
可执行文件
在 windows 系统上,可执行文件是通过组策略和环境变量决定的。在cmd上 使用 set pathext 可以查看
顺便提一下
// unix 系默认的可执行文件,必须输入完整文件名
vue-cli-service
// windows cmd 中默认的可执行文件,当我们不添加后缀名时,自动根据 pathext 查找文件
vue-cli-service.cmd
// Windows PowerShell 中可执行文件,可以跨平台
vue-cli-service.ps1
当前我们使用的 cmd运行 ,则 vue-cli-service serve
,就相当于 node_modules/.bin/vue-cli-service.cmd serve
总结
1、运行 npm run XXX
2、npm 先在当前目录 的 node_modules/.bin 查找要执行的程序,如果找到则运行;没有找到 则从全局的 node_modules/.bin 中查找,npm i -g xxx 就是安装到到全局目录;
3、如果全局目录还是没找到,那么就从 path 环境变量中查找有没有其他同名的可执行程序。