想寫 JSX，又不想用編譯器？HTM 可以幫你

原文作者：HTM Team

譯者：UC 國際研發 Jothy

寫在最前：歡迎你來到“UC國際技術”公衆号，我們将為大家提供與用戶端、服務端、算法、測試、資料、前端等相關的高品質技術文章，不限于原創與翻譯。

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