探索npm run dev的运行逻辑

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

npm run dev在哪里

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

js 复制代码
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  } 

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

探索步骤

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

css 复制代码
[^node包]:node_modules

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

3.之后我们按照他的"bin/vite.js"再去寻找

在这里我们发现了三个

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

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

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

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

最后总结

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

相关推荐
OEC小胖胖1 分钟前
09|DOM Renderer 的 Host 层:从 Fiber 到真实 DOM 的落地
前端·前端框架·react·开源库
xuyuan19982 分钟前
超越Selenium:自动化测试框架Cypress在现代前端测试中的卓越实践(windows版本)三
前端·windows·测试工具·系统架构·cypress
企业对冲系统官4 分钟前
价格风险管理平台审批角色配置与权限矩阵设计
大数据·运维·开发语言·前端·网络·数据库·矩阵
步步为营DotNet5 分钟前
深度剖析.NET 中CancellationToken:精准控制异步操作的关键
java·前端·.net
thinkQuadratic6 分钟前
CSS给文本添加背景颜色等效果
前端·css
波波鱼દ ᵕ̈ ૩8 分钟前
AJAX(1)
前端·javascript·ajax
毕设十刻8 分钟前
基于Vue的酒店管理系统4yv4w(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
梦6509 分钟前
Vue3 响应式原理与响应式属性 详解
前端·javascript·vue.js
程序员的程13 分钟前
我用 stock-sdk 做了个 A 股股票看板
前端·javascript·typescript
IT_陈寒17 分钟前
5 个现代 JavaScript 特性让你彻底告别老旧写法,编码效率提升 50%
前端·人工智能·后端