跳到主要內容

在 Deno 中設定 JSX

Deno 在 .jsx 檔案和 .tsx 檔案中內建支援 JSX。Deno 中的 JSX 可用於伺服器端渲染或產生供瀏覽器使用的程式碼。

預設設定​

Deno CLI 對 JSX 的預設設定與 tsc 的預設設定不同。Deno 有效地使用下列 TypeScript 編譯器 選項作為預設

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "React.createElement",
    "jsxFragmentFactory": "React.Fragment"
  }
}

JSX 匯入來源​

在 React 17 中，React 團隊新增了他們稱為新的 JSX 轉換。這增強並現代化了 JSX 轉換的 API，並提供了一種機制，可以自動將 JSX 函式庫匯入模組，而不必明確匯入或使其成為全域範圍的一部分。這通常讓在應用程式中使用 JSX 變得更容易。

從 Deno 1.16 開始，增加了對這些轉換的初步支援。Deno 支援 JSX 匯入來源指令，以及在組態檔中組態 JSX 匯入來源。

JSX 執行時期​

在使用自動轉換時，Deno 會嘗試匯入預期符合新的 JSX API 的 JSX 執行時期模組，且位於 jsx-runtime 或 jsx-dev-runtime。例如，如果 JSX 匯入來源組態為 react，則發出的程式碼會將此新增到發出的檔案

import { jsx as _jsx } from "react/jsx-runtime";

Deno 通常使用明確的指定符，這表示它不會在執行時期嘗試發出的指定符以外的任何其他指定符。這表示若要成功載入 JSX 執行時期，"react/jsx-runtime" 需要解析為模組。話雖如此，Deno 支援遠端模組，而且大多數 CDN 都能輕鬆解析指定符。

例如，如果你想從 esm.sh CDN 使用 Preact，你會使用 https://esm.sh/preact 作為 JSX 輸入來源，而 esm.sh 會將 https://esm.sh/preact/jsx-runtime 解析為模組，包括在回應中提供標頭，告訴 Deno 在何處尋找 Preact 的類型定義。

使用 JSX 輸入來源實用程式​

無論你是否為專案設定 JSX 輸入來源，或者你正在使用預設的「舊版」設定，你都可以將 JSX 輸入來源實用程式新增到 .jsx 或 .tsx 模組，而 Deno 會尊重它。

@jsxImportSource 實用程式需要在模組的開頭註解中。例如，要從 esm.sh 使用 Preact，你可以執行類似以下的動作

/** @jsxImportSource https://esm.sh/preact */

export function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

在設定檔中使用 JSX 輸入來源​

如果你想為整個專案設定 JSX 輸入來源，這樣你就不需要在每個模組中插入實用程式，你可以使用 設定檔 中的 "compilerOptions" 來指定這一點。例如，如果你使用 Preact 作為來自 esm.sh 的 JSX 函式庫，你會在設定檔中設定以下內容

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/preact"
  }
}

使用輸入映射​

在無法將輸入來源加上 /jsx-runtime 或 /jsx-dev-runtime 解析為正確模組的情況下，可以使用輸入地圖指示 Deno 在何處尋找模組。輸入地圖也可以用來讓輸入來源「更簡潔」。例如，如果您想從 skypack.dev 使用 Preact，並讓 skypack.dev 包含所有類型資訊，您可以設定類似這樣的輸入地圖

{
  "imports": {
    "preact/jsx-runtime": "https://cdn.skypack.dev/preact/jsx-runtime?dts",
    "preact/jsx-dev-runtime": "https://cdn.skypack.dev/preact/jsx-dev-runtime?dts"
  }
}

然後您可以使用以下語用

/** @jsxImportSource preact */

或者您可以在編譯器選項中設定

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

然後您需要在命令列上傳遞 --import-map 選項（如果使用設定檔，則同時傳遞 --config 選項），或在您的 IDE 中設定 deno.importMap 選項（以及 deno.config 選項）。

目前的限制​

目前 JSX 輸入來源支援有兩個限制

  • 在類型檢查時，沒有任何輸入或輸出的 JSX 模組無法正確轉譯（請參閱：microsoft/TypeScript#46723）。執行時期會看到關於 _jsx 未定義的錯誤。若要解決此問題，請將 export {} 新增至檔案，或使用 --no-check 旗標，這將導致模組正確發射。
  • 使用 "jsx-reactdev" 編譯器選項時，不支援 --no-emit/套件化/編譯（請參閱：swc-project/swc#2656）。將會發生各種執行時期錯誤，原因是無法載入 jsx-runtime 模組。若要解決此問題，請改用 "jsx-react" 編譯器選項，或不要使用 --no-emit、套件化或編譯。