如何通过<script src>获取Preact与HTM的特定导出htm和h？

直接通过CDN加载的Preact和HTM会在全局作用域暴露对应的对象/函数，你可以通过以下清晰的方式获取h和htm，同时保持代码可读性，适合直接复制到任意平台使用：

完整可运行代码 #

<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.2/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js"></script>
<script>
  // 从全局preact对象中解构出h（创建元素方法）和render（渲染方法）
  const { h, render } = preact;
  // 绑定htm与Preact的h方法，让模板生成Preact元素，重命名为html更直观
  const html = htm.bind(h);

  // 定义组件，可直接使用Tailwind样式
  const App = html`
    <p class="text-2xl font-bold text-blue-600">Hello World</p>
  `;

  // 将组件挂载到页面body（也可指定具体DOM节点）
  render(App, document.body);
</script>

关键说明 #

• 获取h：Preact的UMD包会在全局创建preact对象，h是它的核心创建元素方法，通过解构赋值const { h } = preact能清晰拿到变量，避免冗余的preact.h写法。
• 获取htm：HTM的UMD包直接在全局暴露htm函数，直接调用即可；通过htm.bind(h)绑定Preact的h后，重命名为html让模板写法更符合直觉。
• 渲染组件：添加render方法是Preact将组件渲染到页面的必要步骤，原代码缺少这一步会无法在页面看到效果。

这种写法结构清晰，无node_modules依赖，复制到WordPress、Replit、Codepen等平台都能直接运行，同时保持代码可读性。

内容的提问来源于stack exchange，提问作者SUPA