詳解TypeScript編譯TSX文件的方法
一、簡介
因?yàn)槭褂?Cycle.js 的 Vite + TSX 所以想詳細(xì)的探索 TSX 在 TS 配置中的編譯情況，本文主要講解 tsconfig 和 tsx 編譯與配置。以常見的框架 PReact 的虛擬 DOM + TSX 組合、snabbdom + TSX 組合不同的配置以及編譯輸出。
除了 TS 還可以渲染， babel 等編譯器進(jìn)行編譯。
二、配置項(xiàng)目
| 配置選項(xiàng) | 描述 | 示例配置 |
|---|---|---|
"jsx" | 指定 JSX 的處理方式 | "jsx": "react" |
"jsxFactory" | 指定在 JSX 中使用的工廠函數(shù) | "jsxFactory": "h" |
"jsxFragmentFactory" | 指定在 JSX 中使用的碎片工廠函數(shù) | "jsxFragmentFactory": "Fragment" |
"jsxImportSource" | 指定從哪個模塊導(dǎo)入 JSX 相關(guān)的符號 | "jsxImportSource": "react" |
"reactNamespace" | 指定全局變量或模塊的命名空間，用于 React | "reactNamespace": "myReact" |
"jsxMode" | 指定 JSX 模式，僅在 TypeScript 4.1+ 中可用 | "jsxMode": "react" |
例如： Preact 提供了自己的渲染函數(shù) h， 用來渲染組件，此時就對應(yīng)著
jsxFactory配置項(xiàng)。
三、配置文件和命令行的優(yōu)先級問題
- 命令行參數(shù)優(yōu)先級高
- 配置文件優(yōu)先級低
例如： jsx 標(biāo)識符在命令行中使用 --jsx react 會覆蓋 jsx: react-jsx。
四、JSX 標(biāo)識
1） 沒有標(biāo)識符
沒有標(biāo)識符時候，不支持編譯 TSX/JSX 文件。
2）preserve 標(biāo)識符
默認(rèn)會將 TSX 文件裝換成 JSX 文件, 其他的 JSX 結(jié)構(gòu)沒有改變
3）react/react-native 標(biāo)識符
默認(rèn)會使用 React.createElement 來創(chuàng)建元素，輸出 js 文件，可以與 jsxFactory 工廠函數(shù)替換庫中的函數(shù)
4）react-jsx/react-jsxdev
會使用相關(guān) React 的 jsx-runtime 進(jìn)行編譯，也可以使用自定義 jsx-runtime 運(yùn)行時。
五、PReact 虛擬dom 和 JSX
1） 寫法一: 使用 preact 運(yùn)行時
{
"jsx": "react-jsx",
"jsxImportSource": "preact",
}得到的編譯結(jié)果是：
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("preact/jsx-runtime");
function Card({ title, children }) {
return ((0, jsx_runtime_1.jsxs)("div", { class: "card", children: [(0, jsx_runtime_1.jsx)("h1", { children: title }), children] }));
}使用 preact 的 jsx 運(yùn)行時。
2） 寫法二： 使用 preact 提供的渲染函數(shù) h 進(jìn)行渲染
{
"jsx": "react",
"jsxFactory": "h",
}得到的編譯結(jié)果是:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const preact_1 = require("preact");
function Card({ title, children }) {
return ((0, preact_1.h)("div", { class: "card" },
(0, preact_1.h)("h1", null, title),
children));
}
;使用 preact 的渲染函數(shù) h。
六、snabbdom 與 @herp-inc/snabbdom-jsx
1）寫法一：使用 jsx
{
"jsx": "react-jsx",
"jsxImportSource": "@herp-inc/snabbdom-jsx",
}編譯結(jié)果
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("@herp-inc/snabbdom-jsx/jsx-runtime");
// import { jsx } from '@herp-inc/snabbdom-jsx'
const EventComp = () => {
return (0, jsx_runtime_1.jsx)("div", { children: "sdfdsfdd" });
};
exports.default = EventComp;使用 jsx 的運(yùn)行時
2） 寫法: jsx 使用
{
"jsx": "react",
"jsxFactory": "jsx",
"jsxFragmentFactory": "Fragment",
}編譯的結(jié)果：
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const snabbdom_jsx_1 = require("@herp-inc/snabbdom-jsx");
const EventComp = () => {
return (0, snabbdom_jsx_1.jsx)("div", null, "sdfdsfdd");
};
exports.default = EventComp;使用@herp-inc/snabbdom-jsx內(nèi)部實(shí)現(xiàn)的 jsx 函數(shù)。
七、snabbdom-jsx
沒有運(yùn)行時：snabbdom-jsx/jsx-runtime 所以不能使用 jsx 運(yùn)行時編譯
1）寫法一
{
"jsx": "react",
"jsxFactory": "html",
}組件寫法以及編譯后的寫法
import { html } from 'snabbdom-jsx';
export const vnode = <div>Hello JSX</div>
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.vnode = void 0;
const snabbdom_jsx_1 = require("snabbdom-jsx");
exports.vnode = (0, snabbdom_jsx_1.html)("div", null, "Hello JSX");是使用了 snabbdom-jsx 提供的 html函數(shù)，源碼如下：
module.exports = {
html: JSX(undefined),
svg: JSX(SVGNS, 'attrs'),
JSX: JSX
};小結(jié)
本文的主要目的是講解 TS 中編譯配置和在不同的環(huán)境下編譯不同的 JSX/TSX 文件，由于 React 的JSX 實(shí)現(xiàn)了 jsx-runtime，所以基本上都有兩套編譯路徑。若不了解 TSX 編譯，本文可以很好的說明。其次可以使用 babel 等其他的工具進(jìn)行編譯學(xué)習(xí)。Cycle.js 中使用 snabbdom 作為虛擬 dom, 可以使用 TSX 不優(yōu)雅的虛擬 dom 的寫法。
以上就是詳解TypeScript編譯TSX文件的方法的詳細(xì)內(nèi)容，更多關(guān)于TypeScript編譯TSX文件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
眾所周知，我們web開發(fā)人員痛恨IE瀏覽器，因?yàn)镮E不支持標(biāo)準(zhǔn)，標(biāo)準(zhǔn)外的默認(rèn)行為又和其他瀏覽器經(jīng)常不一致，所以我們在做項(xiàng)目的時候，經(jīng)常需要專門針對IE來做些文章，當(dāng)然對于referer也不例外，今天我們就來看下如何讓referer兼容主流瀏覽器2014-11-11
這個函數(shù)來自Rico，Longbill及Dnew.cn修改。 說明: 傳入?yún)?shù)一個，為元素的id值或元素本身，返回為元素的真實(shí)背景色值（字符串）。背景值均為16進(jìn)制的值（原代碼是是IE里面返回的是16進(jìn)制的值，而Mozilla則是rgb值，Dnew.cn將其修改為均返回16進(jìn)制的值）。2007-12-12
微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法
這篇文章主要介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
淺談JavaScript 數(shù)據(jù)屬性和訪問器屬性
下面小編就為大家?guī)硪黄獪\談JavaScript 數(shù)據(jù)屬性和訪問器屬性。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了JS獲取并處理php數(shù)組的方法,結(jié)合實(shí)例形式分析了php針對數(shù)組的創(chuàng)建、轉(zhuǎn)換以及js處理數(shù)組的接收、遍歷、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
JavaScript?提供了?automatic?semicolon?insertion?(ASI)自動插入分號規(guī)則,在不加分號的情況下,會自動補(bǔ)充分號來分隔不同語句,下面我們就來具體了解一下這一規(guī)則吧2024-01-01
JavaScript中Blob的具體實(shí)現(xiàn)
Blob常用于處理文件數(shù)據(jù)、圖像數(shù)據(jù)、音頻數(shù)據(jù),本文主要介紹了JavaScript中URL和Blob的具體實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)
這篇文章主要介紹了深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-08-08
本篇文章主要是對JS控制圖片等比例縮放的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
據(jù)說，對于網(wǎng)頁開發(fā)人員來說，F(xiàn)irebug是Firefox瀏覽器中最好的插件之一。2010-08-08