一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

探索npm run dev的运行逻辑

在这个周末 运行项目的时候突发奇想 一直在运行的npm run dev到底是个什么意思
于是 开始了这一期的主题 探索npm run dev的运行逻辑

npm run dev在哪里

在大部分的vite项目中 想必大家都知道 npm run dev 这个命令是在对应的package.json文件里面
也就是这里

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  } 

但如果在命令行中输入vite 尝试了一下是行不通的 那是为什么它可以如此运行呢?
都到这个地步了 总得去看看吧
那么我们就来see see 这是为什么呢

探索步骤

1.我们发现他是来自于vite 那么我们就去node包中寻找vite(ps:不知道为什么在掘金这里脚注没有作用,我手动脚注一下(挠头))

[^node包]:node_modules

探索npm run dev的运行逻辑
2.找到了之后我们去看一下里面的逻辑是怎么写的,发现在这里他用又跳了一层逻辑

探索npm run dev的运行逻辑
3.之后我们按照他的"bin/vite.js"再去寻找

探索npm run dev的运行逻辑
在这里我们发现了三个

三个不同的文件对应的是不同的平台适配

1.在第一个中
我们可以看到他是适配于UNIX系统的 通过shell脚本去执行vite.js
探索npm run dev的运行逻辑

2.在第二个中 可以看到明显的后缀 cmd 基本适用于window系统

探索npm run dev的运行逻辑
3.在第三个中 稍微复杂了一些 去搜了一些资料 大体是适配于 window mac unix等操作系统(感觉很牛逼 有大佬可以帮忙细细讲述一下嘛)

探索npm run dev的运行逻辑

最后总结

package.json中 去bin去寻找不同适配环境 去找一个环境变量 去执行 vite.js 如果没有找到 那么就去 全局包中寻找 (也就是这个命令npm install -g) 如果这样子还是没有的话就会报错了~~~

原文链接:https://juejin.cn/post/7315846825344237594 作者:Vowwwwwww

(0)
上一篇 2023年12月26日 上午10:31
下一篇 2023年12月26日 上午10:41

相关推荐

发表评论

登录后才能评论