一. npm run dev vs. build

模式	作用	核心技术	优化程度
npm run dev	本地开发和调试	HMR (热模块替换)	极低（追求速度）
npm run build	准备生产环境代码	代码优化、压缩	极高（追求性能）

---

1. HMR 无法清除以下事物的缓存：

简而言之，凡是涉及服务器启动时建立的底层配置、文件系统映射，或核心依赖图的更改，HMR 都会失效，此时唯一的解决方案就是停止当前的开发进程并重新启动 (Ctrl+C 后再运行 npm run dev)。

A. 文件系统/静态资产引用 (Static Asset Reference)

• 问题所在： 当您修改一个图片路径（例如，从 /images/pic1.jpg 改为 /assets/pic2.jpg），更改的不仅是 JS 模块中的字符串。

• 深层原因： 许多现代框架在开发模式下，会将 /images/ 或 /assets/ 路径动态映射到您本地硬盘上的实际文件夹。这种底层的文件系统映射关系或资源的索引通常是在服务器启动时建立的。

B. 构建配置文件 (Build Configuration)

• 问题所在： 修改 astro.config.mjs、vite.config.js、或 .env 环境变量。

• 深层原因： 这些配置文件定义了整个应用的基础运行环境和编译规则（例如端口号、代理设置、插件使用、环境变量等）。它们是在服务器启动时被加载和解析的。

C. 依赖版本/结构 (Dependency Graph)

• 问题所在： 安装、卸载新的 NPM 包，或修改 package.json 中的依赖。（重新运行 npm install）

• 深层原因： 这些操作会改变项目的依赖图。开发服务器启动时会基于这个图进行模块解析和预编译。

2 HMR 无法清除缓存的原因 (“热替换”工作原理)

HMR 的目标是最小化页面的更新范围，只替换发生变化的 JavaScript/CSS 模块：

• 当您修改代码时，开发服务器（如 Vite 或 Webpack Dev Server）会识别到文件更改。

• 它只重新编译修改的那个模块。

• 它通过 WebSocket 向浏览器发送一个 “补丁” (patch) 信号，告诉浏览器“替换 Module A”。

• 整个应用的状态和页面通常保持不变。

---

二. Deploy …?

OK, after git push, 进入cloudflare的构建->计算和 AI->workers-and-pages, 点击创建应用程序注意下方神秘白色文字。

tip. Worker 默认是为动态代码设计的。虽然可以用它部署静态文件，但这需要额外的配置…

三. npm commands

npm (Node Package Manager) 是 Node.js 应用程序的默认包管理器，它用于安装、共享和管理项目依赖，同时也是运行项目脚本的核心工具。

(1). 项目脚本命令（npm run <script-name>）

npm run 命令是 npm 最强大和常用的功能之一。它允许您执行在项目根目录下的 package.json 文件中定义的 scripts 字段中的自定义命令。

关键文件位置：package.json

{
  "name": "my-blog-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",      // <--- 这是 'dev' 脚本
    "build": "astro build",  // <--- 这是 'build' 脚本
    "preview": "astro preview",
    "deploy": "npx wrangler deploy --assets=./dist --compatibility-date=..."
  },
  "dependencies": { /* ... */ }
}  

---

(2). 核心包管理命令

命令	完整作用	常见用途
npm update	更新所有本地安装的包到满足 package.json 中定义版本范围的最新版本。	更新项目依赖以获取新功能或安全修复。
npm uninstall <package>	卸载指定的依赖包，并将其从 package.json 中移除。	移除不再需要的库。

---