zeromake 的个人博客
·
在不使用 webpack，vite 的打包工具下使用 preact
💡
原文中文，约8300字，阅读约需20分钟。
📝
内容提要
本文介绍了如何在不使用打包工具的情况下，通过 jsdelivr 和 importmap 在浏览器中直接使用 Preact。内容涵盖模块定义、使用 Preact Hooks、HTM 语法编写 JSX、实现历史路由、异步加载组件，以及如何安装 Node 包以获得 TypeScript 语法提示。提供示例代码，帮助读者快速上手开发应用。
🎯
关键要点
-
使用 jsdelivr 和 importmap 可以在浏览器中直接导入模块，无需打包工具。
-
通过 jsdelivr 获取 preact 和 preact/hooks 的 URL，并在 HTML 中定义 importmap。
-
使用 htm 语法可以更简便地编写 JSX，几乎与 JSX 相同。
-
preact 支持历史路由，推荐使用 wouter 作为路由库。
-
可以使用 hook 编写异步加载组件，动态导入模块。
-
安装 Node 包可以获得 TypeScript 的语法提示，提升开发体验。
❓
延伸问答
如何在浏览器中直接使用 Preact 而不依赖打包工具？
可以通过 jsdelivr 和 importmap 在浏览器中直接导入 Preact 模块，无需打包工具。
使用 Preact 时如何编写 JSX 代码？
可以使用 htm 语法来编写 JSX，htm 语法与 JSX 几乎相同，提供了更简便的写法。
Preact 支持历史路由吗？
是的，Preact 支持历史路由，推荐使用 wouter 作为路由库。
如何在 Preact 中实现异步加载组件？
可以使用 hook 编写异步加载组件，通过动态导入模块来实现。
安装 Node 包有什么好处？
安装 Node 包可以获得 TypeScript 的语法提示，提升开发体验。
htm 语法与 JSX 有什么区别？
htm 语法在引用组件和属性使用变量时与 JSX 有所不同，具体包括闭合标签的写法和属性的语法。
➡️
