前端项目中运行 npm run xxx 的时候发生了什么?

前端项目中运行 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 serve 命令,但是 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 环境变量中查找有没有其他同名的可执行程序。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值