想写 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 相同。

目录
相关文章
|
4月前
|
缓存 网络安全 语音技术
docker安装部署FunASR
本指南详解FunASR在线语音识别服务的外网部署与内网迁移全流程:先在外网拉取Docker镜像、自动下载模型并启动服务(端口10095),验证成功后,将镜像和缓存模型打包导出;再于内网服务器导入镜像、解压模型、挂载运行,全程禁用SSL,支持热词与标点恢复,开箱即用。
2457 3
|
11月前
|
存储 关系型数据库 MySQL
NestJS 配置 TypeORM 进阶教程
本文介绍了在 NestJS 项目中配置 TypeORM 的三种方式:初级阶段直接在 AppModule 中配置;进阶阶段抽离出独立的 DatabaseModule;进一步使用自定义命名空间将数据库配置分离到单独文件,提升可维护性与模块化程度。
512 3
|
前端开发 JavaScript Android开发
Flutter 与 React Native - 详细深入对比分析(2024 年)
Flutter和React Native是两大跨平台框架,各有优缺点。Flutter性能优越,UI灵活,使用Dart;React Native生态广泛,适合JavaScript开发。
4201 6
Flutter 与 React Native - 详细深入对比分析(2024 年)
|
资源调度 前端开发 JavaScript
如何在Node.js环境中安装并使用Bower和LESS
【7月更文挑战第2天】在Node.js环境中,掌握Bower和LESS的使用对前端开发至关重要。安装Bower(全局`npm install -g bower`)用于管理前端资源,通过`bower init`和`bower install`管理依赖。LESS作为CSS预处理器,通过`npm install -g less`安装编译器,用`lessc`命令编译LESS到CSS。虽然Bower已进入维护模式,但理解其用法仍有价值。同时,学习使用Sass或Stylus等预处理器以适应现代前端趋势。
375 0
|
安全 网络协议 网络性能优化
https,http2,http3的区别
https,http2,http3的区别
|
Linux 数据安全/隐私保护
HMC配置及操作
HMC配置及操作
720 0
|
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. 查看
2193 1
|
NoSQL JavaScript 前端开发
部署自己的MOCK(一)
本文适合团队内部没有MOCK服务,对mock有实际需要的小伙伴。
部署自己的MOCK(一)
|
JavaScript API Scala
Node.js 不是银弹,但它仍然是颗子弹
本文的作者 Craig 是一个住在纽约的自由软件开发者,他在最近的看到了一篇名为《如果你正在使用Node.js,你就是误入歧途》的文章,文章对Node.js横加指责,Craig对此表示不满,于是写下了下面的文章: 我真的不知道为什么有人这样的讨厌 Node.js。
746 0

热门文章

最新文章