npm run dev 启动前端项目的原理

在一个使用 Vite 构建工具的 Vue 项目中,当你运行 npm run dev 时,实际执行的命令是 vite。为了理解这一过程,我们需要了解几个关键点:

  1. package.json 文件中的 scripts 字段:

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

    这段代码定义了几个脚本命令,其中 dev 对应的命令是 vite

  2. Vite 工具:

    • Vite 是一个现代的前端构建工具,通常用于开发 Vue 或其他前端框架的项目。
    • 当运行 vite 命令时,Vite 会启动一个开发服务器,并且开启热模块替换(HMR),可以在你修改代码时实时更新浏览器中的内容。
  3. 具体执行过程:

    • 当你执行 npm run dev 命令时,npm 会查找 package.json 中的 scripts 字段,并执行对应的命令 vite
    • vite 命令会启动 Vite 的开发服务器。默认情况下,Vite 会读取项目根目录下的 vite.config.jsvite.config.ts 配置文件(如果存在),并根据该配置文件来启动开发服务器。
    • Vite 会处理你的 Vue 项目文件,通常包括解析 index.html、处理 Vue 组件文件(.vue 文件)、CSS、JavaScript 模块等。

因此,最终执行的关键文件和步骤包括:

  • package.json 中的 scripts 字段 :定义了 dev 脚本。
  • Vite 配置文件vite.config.jsvite.config.ts,如果存在):用于配置 Vite 开发服务器的行为。
  • 项目的入口文件 (通常是 index.html 和 Vue 主文件 main.jsmain.ts):这些文件会在 Vite 开发服务器启动时被加载和解析。

总结来说,npm run dev 最终执行的是 Vite 工具,它会读取并解析你的项目配置和入口文件,启动一个开发服务器来进行本地开发。

相关推荐
小周同学@2 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok2 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~2 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号2 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌2 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康3 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海3 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏4 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码4 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby4 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js