现代 JavaScript 项目可绕过构建工具，直接用浏览器原生 ESM 开发：需带 .js 后缀、用 HTTP 服务解决 CORS 和 MIME 类型问题，裸导入需替换为 CDN URL，热更新可通过文件监听+刷新实现。
现代 JavaScript 项目可以完全绕过构建工具（如 Vite、Webpack），直接用浏览器原生 ESM + import 语法启动本地开发，核心在于利用 file:// 协议或轻量 HTTP 服务解决模块解析与跨域限制。
用浏览器原生 ESM 直接打开 HTML
将入口 HTML 的 <script type="module"> 指向本地 .js 文件，浏览器会按 ESM 规则解析相对路径 import。适合简单 demo 或单页小项目：
- 所有模块必须使用
.js后缀（ESM 强制要求） - 不能省略扩展名：✅
import { foo } from './utils.js'，❌import { foo } from './utils' - 静态资源（如 JSON、CSS）需用
fetch或import配合构建时插件——纯浏览器环境不支持import data from './config.json' assert { type: 'json' }（仅部分 Chromium 120+ 支持，兼容性差） - 直接双击 HTML 文件可能因 CORS 被拒（
file://协议下 fetch 受限），此时需启用本地 HTTP 服务
零依赖 HTTP 服务：仅用 Node.js 内置模块
不装任何第三方包，用 Node.js http + fs + path 实现最小化静态服务，自动处理 ESM 模块请求头：
- 响应头必须包含
Content-Type: text/javascript（对.js）或application/json（对.json），否则浏览器拒绝执行模块脚本 - 对
/node_modules/路径不做特殊代理，ESM 不支持裸导入（import { debounce } from 'lodash'），需改写为相对路径或使用 Skypack/CDN - 示例服务片段：用
createServer监听端口，读取文件后设置res.setHeader('Content-Type', ...)，再res.end(data)
替代裸导入：用 CDN URL 作为模块标识符
在 ESM 中，模块说明符可以是完整 URL。借助 Skypack、esm.sh 等服务，直接导入 npm 包：
立即学习“Java免费学习笔记（深入）”；
- ✅
import { createApp } from 'https://cdn.skypack.dev/vue@3' - ✅
import _ from 'https://esm.sh/lodash-es' - 避免本地安装和打包，但注意版本锁定（推荐带哈希或固定版本号，防止意外更新破坏）
- 开发时可配合
import.meta.url动态构造路径，实现轻量条件加载
热更新？靠浏览器刷新 + 文件监听（可选）
零配置不等于零体验。若需保存即刷新，可用 chokidar（极轻量）监听文件变化并触发浏览器重载：
- 启动 HTTP 服务的同时起一个监听进程，检测
.js、.html变更 - 通过 WebSocket 或
EventSource推送 reload 指令到页面内联脚本 - 不依赖 HMR 复杂机制，本质是“保存 → 浏览器 F5”，符合零配置初衷
