在不使用 webpack，vite 的打包工具下使用 preact
内容提要
本文介绍了如何在不使用打包工具的情况下，通过 jsdelivr 和 importmap 在浏览器中直接使用 Preact。内容涵盖模块定义、使用 Preact Hooks、HTM 语法编写 JSX、实现历史路由、异步加载组件，以及如何安装 Node 包以获得 TypeScript 语法提示。提供示例代码，帮助读者快速上手开发应用。
延伸解读
无打包开发的核心机制
文章通过 importmap 将模块标识符映射到 jsdelivr 的 ESM 地址，使浏览器能直接解析 import 语句。这种方式依赖浏览器原生模块支持，无需构建步骤，但需注意 importmap 的兼容性。对于简单 demo 或快速原型，它能显著减少工具链配置，但复杂依赖时手动维护映射会变得繁琐。
htm 与 JSX 的语法差异
htm 允许在模板字符串中编写类似 JSX 的语法，但引用组件需用 <${Button}/>，属性变量需用 ${} 包裹，闭合标签可简写为 <//>。这些差异虽小，但迁移时需留意。文章指出 htm 几乎与 JSX 一致，适合不想引入编译步骤的开发者，但需适应模板字符串的书写习惯。
路由与异步组件的实现选择
文章对比了多个路由库，最终推荐 wouter，因其体积小且支持 history 路由。通过 useHashLocation 钩子可快速集成。异步加载组件则利用 useState 和 useEffect 动态导入模块，实现按需加载。这些方案在无打包环境下可行，但需自行处理加载状态和错误边界，不如打包工具生态成熟。
适用场景与局限性
该方法适合简单 demo 或对构建工具有抵触的场景，能直接使用模块导入导出、动态导入和 TS 提示。但文章也指出，依赖复杂时（如 ahooks）手动编写 importmap 非常麻烦。此外，生产环境需考虑 CDN 可靠性、缓存和版本管理。因此，它更适用于快速验证或小型项目，而非大型应用。
Q&A
如何在浏览器中直接使用 Preact 而不依赖打包工具？
可以通过 jsdelivr 和 importmap 在浏览器中直接导入 Preact 模块，无需打包工具。
使用 Preact 时如何编写 JSX 代码？
可以使用 htm 语法来编写 JSX，htm 语法与 JSX 几乎相同，提供了更简便的写法。
Preact 支持历史路由吗？
是的，Preact 支持历史路由，推荐使用 wouter 作为路由库。
如何在 Preact 中实现异步加载组件？
可以使用 hook 编写异步加载组件，通过动态导入模块来实现。
安装 Node 包有什么好处？
安装 Node 包可以获得 TypeScript 的语法提示，提升开发体验。
htm 语法与 JSX 有什么区别？
htm 语法在引用组件和属性使用变量时与 JSX 有所不同，具体包括闭合标签的写法和属性的语法。
