无需 Webpack，不碰 Vite，一个 HTML 文件开启高效开发新纪元
你是否也曾深夜面对 node_modules 里上万个文件苦笑？是否在配置构建工具时反复调试 vite.config.js 直到头秃？当'现代前端开发'几乎等同于'构建工具配置大赛'，我们是否遗忘了 Web 最原始的纯粹？
今天，让我们拨开迷雾，回归本质——用纯 ESM（ECMAScript Module）组件库 + 原生浏览器能力，构建真正'零构建'的现代应用。本文将以 Shoelace 为例，手把手带你体验'写完即运行'的开发快感。
一、什么是'零构建工具链'？它真的可行吗？
零构建工具链 ≠ 完全不用工具，而是指：
✅ 开发阶段跳过编译、打包、转译等构建步骤
✅ 直接利用浏览器原生支持的 ESM 能力加载模块
✅ 依赖纯 ESM 格式发布的第三方库（如 Shoelace）
✅ 通过简单 HTTP 服务器（甚至浏览器文件协议）直接运行
🌰 举个栗子：
传统流程：写代码 → npm run build → 生成 dist → 部署
零构建流程：写代码 → 保存 → 刷新浏览器 → 立刻生效
为什么现在可行？
- 现代浏览器（Chrome 61+、Firefox 60+、Safari 10.1+）已全面支持 ESM
- HTTP/2 普及，多文件请求性能瓶颈大幅缓解
- 越来越多优质库（Shoelace、Lit、Alpine.js 等）提供纯 ESM 发行版
- CDN 服务（esm.sh、Skypack、jsDelivr）优化 ESM 按需加载
二、Shoelace：为零构建而生的现代组件库
Shoelace 是一个基于 标准 Web Components 构建的 UI 组件库，其设计哲学与零构建理念高度契合：
| 特性 | 说明 | 零构建价值 |
|---|---|---|
| 纯 ESM 发行 | 无 CommonJS/UMD 混合格式 | 浏览器直接 import |
| 框架无关 | 基于 Custom Elements 标准 | 无需 React/Vue 运行时 |
| 按需加载 | 每个组件独立导出 | 减少初始加载体积 |
| CSS-in-JS 友好 | 通过 CSS 变量定制主题 | 无需 PostCSS 等预处理 |
| 无障碍优先 | 内置 ARIA 支持 | 开箱即用的可访问性 |
💡 关键洞察：Shoelace 的组件是'真正的 Web 标准组件'，而非框架封装层。这意味着
<sl-button>在任何支持 Web Components 的环境中行为一致——这正是零构建生态的基石。
三、实战：5 分钟搭建零构建应用
步骤 1：创建基础 HTML（无需任何配置文件！）
<!DOCTYPE html>
零构建应用示例
✨ 零构建应用已启动
提交
提示：所有代码均未经过构建工具处理！
