想写 JSX,又不想用编译器?HTM 可以帮你

简介: HTM 是纯 JavaScript 实现的类 JSX 的语法 - 无需转换器就可以使用。

原文作者:HTM Team

译者:UC 国际研发 Jothy

写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创与翻译。

image.png

HTM 是纯 JavaScript 实现的类 JSX 的语法 - 无需转换器就可以使用。

你可直接使用 React/Preact 在浏览器中开发,然后将 HTM 编译为生产包。它使用标准 JavaScript 标签模板,适用于所有现代浏览器。
项目地址:https://github.com/developit/htm

HTM 的各项数据
直接在浏览器中使用时 < 700 bytes

️ 与 Preact 一起使用时 < 500 bytes(感谢 gzip )

使用 babel-plugin-htm 编译时 0 bytes

语法:类 JSX,但有所提升

  • 使用 HTM 编写的语法无限接近 JSX :
  • Spread props:
  • 自关闭标签:
  • 组件: <${Foo}> (其中 Foo 是组件引用)
  • 布尔属性:

对 JSX 的改进

实际上 HTM 更深度采用了 JSX 风格的语法!

以下是 JSX 中不具备的符合人体工程学的功能:

无需编译器

  • HTML 引号可选:
  • 组件结束标记: <${Footer}>footer content/>
  • 通过 lit-html VSCode 插件实现语法高亮和语言支持

HTM 2.0 发布啦!

我们使用全新的自定义 JSX 解析器,从头开始构建 HTM 的性能和大小。

这对你来说意味着什么?

  • HTM 速度提升了 20 倍
  • …体积缩小了 10%
  • …随处运行(原生 SSR!)
  • 语法无限接近 JSX
  • 缓存速度提高20%
  • 更优的输出

全新的 Babel 插件!

我们的 Babel 插件也进行了大幅修改! 它的速度提高了 1-2 个量级,不再需要 JSDOM,并且支持自定义输出。

此更新还修复了缓存、边缘情况和空白处理相关的多个问题。

还带来了新语法?

是的,但别慌。 现在写 HTM 基本上就是在写 JSX。你只需要记住两件事:

之类的组件写做 <${Foo}>

{a} 之类的字段写为 ${a}

其他一切与 JSX 相同。

目录
相关文章
|
6月前
|
缓存 网络安全 语音技术
docker安装部署FunASR
本指南详解FunASR在线语音识别服务的外网部署与内网迁移全流程:先在外网拉取Docker镜像、自动下载模型并启动服务(端口10095),验证成功后,将镜像和缓存模型打包导出;再于内网服务器导入镜像、解压模型、挂载运行,全程禁用SSL,支持热词与标点恢复,开箱即用。
3755 3
|
JavaScript Linux iOS开发
node版本管理工具n
Node版本管理工具n是一个用于管理Node.js版本的命令行工具。它可以让您在同一台机器上同时安装和切换不同版本的Node.js。 使用n工具,您可以执行以下操作: 1. 安装Node.js版本:通过运行`n install <version>`命令,您可以安装指定版本的Node.js。例如,`n install 12.18.3`将安装Node.js 12.18.3版本。 2. 切换Node.js版本:通过运行`n use <version>`命令,您可以切换当前正在使用的Node.js版本。例如,`n use 14.15.4`将切换到Node.js 14.15.4版本。 3. 查看
2285 1
|
NoSQL JavaScript 前端开发
部署自己的MOCK(一)
本文适合团队内部没有MOCK服务,对mock有实际需要的小伙伴。
部署自己的MOCK(一)
|
22天前
|
Linux 程序员 数据格式
【2026最新】Notepad++下载、安装和使用一篇搞定(附中文版安装包)
Notepad++ 是一款免费开源、轻量高效的 Windows 文本编辑器,支持 C/Python/HTML 等 80+ 语言语法高亮、代码折叠、正则替换、编码转换及插件扩展,专为程序员与文本处理用户打造,完美替代系统记事本。(239字)
|
8天前
|
人工智能 缓存 安全
Claude Code 封号真实原因曝光,这次彻底不装了,直接针对国内开发者的账号下手?
Claude Code 封号潮背后:逆向扒出客户端隐写区域标记,Anthropic 政策收紧叠加 DeepSeek 7 月涨价,国产替代更紧迫。
|
13天前
|
人工智能 JSON 自然语言处理
让教学更智慧:用阿里云百炼工作流,自动生成中小学教材内容#小有可为#有温度的AI
通过可视化工作流编排,将大模型推理能力转化为标准化的教学内容生成引擎。教师只需输入教材标题和适用学段,即可自动获得结构完整、符合课程标准的章节内容,大幅降低备课门槛,助力教育资源均衡化。
496 127
|
17天前
|
存储 人工智能 监控
QoderWork完全指南:从入门到精通,把“AI实习生”变成你的全能工作搭档
阿里云2026年推出的桌面端AI工作助手QoderWork,不止聊天,更可动手干活:本地运行、安全可控,支持文件整理、数据分析、PPT生成、网页开发等;内置专家套件、多Agent协作与自定义Skills,让AI真正成为你身边的“AI实习生”。
|
8天前
|
人工智能 安全 程序员
终于,Claude Code 封号的原因被曝光了!竟然针对中国用户,植入隐形代码?!
通俗易懂地揭秘 Claude Code 封号的手段,分享一些自己对 AI 编程困境的思考,Codex、Cursor、DeepSeek、智谱 GLM、甚至是豆包,都有所行动了
464 1