npm run dev （经历了什么）

1. Shell 解析阶段

识别、查找npm

按下回车键，在终端中输入 npm run dev 并执行时：

1. 操作系统 Shell（如 Bash、Zsh、PowerShell）会识别出 npm 命令。
2. Shell 会在系统的 PATH 环境变量中查找 npm 这个可执行文件的位置。通常，它位于 Node.js 的安装目录下。

2. NPM 解析阶段

查找 package.json 中 dev 的值

1. NPM 被启动后，它会在当前目录及其所有父目录中查找 package.json 文件。

2. 找到 package.json 后，NPM 会读取其中的 scripts 对象，寻找名为 "dev" 的属性。

3. 例如，你的 package.json 中可能有这样一段：

   
   {
     "scripts": {
       "dev": "vite", // 或 "webpack serve", "vue-cli-service serve", "next dev" 等
       "build": "vite build"
     }
   }

• NPM 会获取 "dev" 对应的值，例如 "vite"。

3. 命令执行阶段

执行 ./node_modules/vite/bin/vite.js

1. NPM 会创建一个新的 Shell 环境来执行 "vite" 这个命令。
2. 关键点： NPM 会在这个新 Shell 的 PATH 中自动添加node_modules/.bin/ 这个目录。这是一个非常重要的设计！
3. 因此，当它执行 vite 时，它实际上找到并执行的是 ./node_modules/.bin/vite 这个文件。
4. ./node_modules/.bin/vite 通常是一个软链接（Symbolic Link），它指向实际安装的 vite 包中的可执行文件（../vite/bin/vite.js）。

4. 构建工具启动阶段（以 Vite 为例）

读取 vite.config.js(ts) 配置

现在，真正的构建工具（这里是 Vite）被启动了。它会：

1. 解析配置： 读取你的 vite.config.js（或 vite.config.ts）等配置文件，与它的默认配置进行合并。
2. 启动开发服务器： 创建一个本地 HTTP 服务器（默认通常是 http://localhost:5173）。
3. 代码预打包（可选，Vite 特有）： Vite 会使用 esbuild 将你的第三方依赖（node_modules 中的库）快速地预打包成原生 ES 模块，这极大地提升了后续的加载速度。
4. 文件监听： 启动一个文件监听器（Watcher），监听你的源代码目录（如 src）下的文件变化。

5. 浏览器请求与响应阶段

• 你打开浏览器，访问 http://localhost:5173。

• 服务器接收到请求，返回 index.html。

• 浏览器解析 index.html，遇到 <script type="module" src="/src/main.js"> 等标签，向开发服务器发起新的请求。

• 核心转换： 当服务器收到对 .js, .vue, .ts, .jsx 等文件的请求时，它**“on the fly”**（按需）进行转换：

  • TS -> JS: 使用 esbuild 将 TypeScript 转换为 JavaScript。
  • Vue/Svelte -> JS: 使用对应的编译器将单文件组件编译成 JavaScript 模块。
  • CSS Import: 处理 import “./style.css“，可能会将其转换为注入 <style> 标签的 JS 代码。
  • JSX -> JS: 转换 JSX 语法。

• 转换后的代码以 ES 模块的形式返回给浏览器。现代浏览器都原生支持 ES 模块，因此可以直接解析和执行。

6. 热更新阶段（HMR - Hot Module Replacement）

开发服务器最重要的功能之一。

• 当你修改并保存一个文件（例如 Foo.vue）时，文件监听器会检测到这个变化。
• 服务器计算出哪些模块发生了改变（Foo.vue 本身以及依赖它的模块）。
• 服务器通过 WebSocket 连接向浏览器推送一条消息，告知：“ ./Foo.vue 更新了 ”
• 浏览器收到消息后，动态替换掉正在运行的应用程序中的旧模块，而无需完全刷新整个页面。这保留了应用的当前状态（例如表单输入、数据、滚动位置），极大地提升了开发体验。

不同框架/工具的细微差别

虽然流程大同小异，但不同工具链的 dev 命令具体行为有所不同：

• vue-cli-service serve (Vue CLI): 底层是基于 Webpack。它会先执行一次完整的打包构建，生成内存中的 Bundle，然后启动服务器。
• webpack serve: 和 Vue CLI 类似，启动 Webpack Dev Server。
• vite: 如上所述，利用浏览器原生 ES 模块和支持 ESBuild 的快速预打包，启动速度极快。
• next dev (Next.js): 启动 Next.js 的开发服务器，除了上述功能，还处理了页面路由、服务端渲染（SSR）、静态生成（SSG）等 Next.js 特有的功能。
• nuxt dev (Nuxt.js): 类似于 Next.js，为 Nuxt 框架服务。