发布于 2026-01-06 0 阅读
0

Hyperscript Tagged Markup (HTM):一种使用标准标签模板的 JSX 替代方案,并支持编译器。HTM(Hyperscript Tagged Markup)DEV 全球展示挑战赛,由 Mux 呈现:展示你的项目!

Hyperscript Tagged Markup (HTM):使用标准标记模板的 JSX 替代方案,并具有编译器支持。

HTM(超脚本标记)npm

由 Mux 赞助的 DEV 全球展示挑战赛:展示你的项目!

这是Preact 的创建者@_developit开发的一个有趣的库。

GitHub 标志 开发/ htm

Hyperscript Tagged Markup:使用标准标记模板的 JSX 替代方案,并具有编译器支持。

HTM(超脚本标记)npm

超脚本标记演示

htm它是用纯 JavaScript 实现的类似 JSX 的语法——无需转译器。

直接在浏览器中使用 React/Preact 进行开发,然后编译htm后用于生产环境。

它使用标准的 JavaScript标签模板,可在所有现代浏览器中运行

htm数据说话:

🐣直接在浏览器中使用时小于 600 字节

⚛️与 Preact 一起使用时小于 500 字节(感谢 gzip 压缩 🌈)

🥚 < 450 字节 htm/mini版本

🏅如果使用babel-plugin-htm编译,则为 0 字节

语法:类似 JSX,但也更简洁

使用 HTM 编写的语法与 JSX 的语法非常接近:

  • 传播道具:<div ...${props}>而不是<div {...props}>
  • 自闭合标签:<div />
  • 组件:<${Foo}>而不是<Foo> (其中Foo是组件引用)
  • 布尔属性:<div draggable />

JSX 的改进

htm实际上,它在 JSX 风格的语法基础上又向前迈进了一步!

以下是一些您可以免费获得的、但并非必须付费的人体工学功能……




与 JSX 相比:

  • 无需转译器
  • HTML 的可选引号:
  • 组件结束标签:<${Footer}>页脚内容<//>
  • 通过 lit-html VSCode 扩展和 vim-jsx-pretty 插件实现语法高亮和语言支持。
  • 从 2.0.0 版本开始,htm 稳定可靠,经过充分测试,已准备好投入生产使用。

文章来源:https://dev.to/ben/hyperscript-tagged-markup-htm-jsx-alternative-using-standard-tagged-templates-with-compiler-support-4nc8