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

辣条小哥哥2024-10-12 12:26

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

package.json 文件中的 scripts 字段:
json 复制代码
```
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}
```
这段代码定义了几个脚本命令，其中 dev 对应的命令是 vite。
Vite 工具:
- Vite 是一个现代的前端构建工具，通常用于开发 Vue 或其他前端框架的项目。
- 当运行 vite 命令时，Vite 会启动一个开发服务器，并且开启热模块替换（HMR），可以在你修改代码时实时更新浏览器中的内容。
具体执行过程:
- 当你执行 npm run dev 命令时，npm 会查找 package.json 中的 scripts 字段，并执行对应的命令 vite。
- vite 命令会启动 Vite 的开发服务器。默认情况下，Vite 会读取项目根目录下的 vite.config.js 或 vite.config.ts 配置文件（如果存在），并根据该配置文件来启动开发服务器。
- Vite 会处理你的 Vue 项目文件，通常包括解析 index.html、处理 Vue 组件文件（.vue 文件）、CSS、JavaScript 模块等。

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

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

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