大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 htm

htm 是纯 JavaScript 编写的类似 JSX 的语法，无需任何转译器。直接在浏览器中使用 React/Preact 进行开发，然后编译 htm 并用于生产环境。

htm 使用标准的 JavaScript 标签模板，并兼容所有现代浏览器。

直接在浏览器中使用时小于 600 字节
与 Preact 一起使用时 gzip 后小于 500 字节
htm/mini 版本小于 450 字节
使用 babel-plugin-htm 编译时为 0 字节

htm 的语法类似 JSX，但更轻量：：

展开 props：<div ...${props}> 而不是 <div {...props}>
支持自闭合标签：<div />
组件：<${Foo}> 而不是 <Foo>
布尔属性：<div draggable />

同时， htm 对 jsx 语法也进行了一些改进，例如：

无需任何转译器
HTML 的可选引号：<div class=foo>
组件结束标签：<${Footer}>footer content<//>
通过 lit-html VSCode 扩展和 vim-jsx-pretty 插件实现语法高亮和语言支持。
支持多个根元素（片段）：<div /><div />
支持 HTML 样式的注释：<div></div>

目前 htm 在 Github 开源，有超过 9k 的 star、33k 的项目依赖量，是一个值得关注的前端开源项目。

如何使用 htm

htm 已发布到 npm，可通过 unpkg.com CDN 访问：

import htm from "https://unpkg.com/htm?module";
const html = htm.bind(React.createElement);
// 如果只想在一个文件中使用 htm + preact？可以使用下面高度优化的版本
import {
  html,
  render,
} from "https://unpkg.com/htm/preact/standalone.module.js";

如果正在使用 Preact 或 React，则使用 htm 非常简单：

import { render } from "preact";
import { html } from "htm/preact";
render(html`<a href="/">Hello!</a>`, document.body);

下面是在 React 中使用的示例：

import ReactDOM from "react-dom";
import { html } from "htm/react";
ReactDOM.render(html`<a href="/">Hello!</a>`, document.body);

htm 高级用法

由于 htm 旨在满足与 JSX 相同的需求，因此开发者可以在任何使用 JSX 的地方使用。

使用 vhtml 生成 HTML：

import htm from "htm";
import vhtml from "vhtml";

const html = htm.bind(vhtml);

console.log(html`<h1 id="hello">Hello world!</h1>`);
// '<h1 id="hello">Hello world!</h1>'

通过 jsxobj 进行 Webpack 配置

import htm from "htm";
import jsxobj from "jsxobj";
const html = htm.bind(jsxobj);
console.log(html`
  <webpack watch mode="production">
    <entry path="src/index.js" />
  </webpack>
`);
// {
//   watch: true,
//   mode: 'production',
//   entry: {
//     path: 'src/index.js'
//   }
// }

参考资料

https://github.com/developit/htm

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

JSX 即将过时 ?HTM.js 要重塑前端开发新方式?

什么是 htm

如何使用 htm

htm 高级用法

参考资料