欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解TypeScript編譯TSX文件的方法

 更新時間：2023年09月07日 08:58:39   作者：進二開物  
因為使用 Cycle.js 的 Vite + TSX 所以想詳細的探索 TSX 在 TS 配置中的編譯情況,本文主要講解 tsconfig 和 tsx 編譯與配置,以常見的框架 PReact 的虛擬 DOM + TSX 組合、snabbdom + TSX 組合不同的配置以及編譯輸出

一、簡介

因為使用 Cycle.js 的 Vite + TSX 所以想詳細的探索 TSX 在 TS 配置中的編譯情況，本文主要講解 tsconfig 和 tsx 編譯與配置。以常見的框架 PReact 的虛擬 DOM + TSX 組合、snabbdom + TSX 組合不同的配置以及編譯輸出。

除了 TS 還可以渲染， babel 等編譯器進行編譯。

二、配置項目

配置選項描述示例配置
"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 配置項。

三、配置文件和命令行的優(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)識符

默認會將 TSX 文件裝換成 JSX 文件, 其他的 JSX 結(jié)構(gòu)沒有改變

3）react/react-native 標(biāo)識符

默認會使用 React.createElement 來創(chuàng)建元素，輸出 js 文件，可以與 jsxFactory 工廠函數(shù)替換庫中的函數(shù)

4）react-jsx/react-jsxdev

會使用相關(guān) React 的 jsx-runtime 進行編譯，也可以使用自定義 jsx-runtime 運行時。

五、PReact 虛擬dom 和 JSX

1） 寫法一: 使用 preact 運行時

{
    "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 運行時。

2） 寫法二： 使用 preact 提供的渲染函數(shù) h 進行渲染

{
    "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 的運行時

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)部實現(xiàn)的 jsx 函數(shù)。

七、snabbdom-jsx

沒有運行時：snabbdom-jsx/jsx-runtime 所以不能使用 jsx 運行時編譯

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 實現(xiàn)了 jsx-runtime，所以基本上都有兩套編譯路徑。若不了解 TSX 編譯，本文可以很好的說明。其次可以使用 babel 等其他的工具進行編譯學(xué)習(xí)。Cycle.js 中使用 snabbdom 作為虛擬 dom, 可以使用 TSX 不優(yōu)雅的虛擬 dom 的寫法。

以上就是詳解TypeScript編譯TSX文件的方法的詳細內(nèi)容，更多關(guān)于TypeScript編譯TSX文件的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論