跳至主要內容

@babel/preset-react

此預設值始終包含下列外掛程式

以及 development 選項

傳統執行時期新增

自動執行時間 (自 v7.9.0 起) 在啟用 development 選項時會自動新增這些外掛的功能。如果你啟用了自動執行時間，新增 @babel/plugin-transform-react-jsx-self 或 @babel/plugin-transform-react-jsx-source 會出錯。

注意：v7 中不再支援 Flow 語法。如果你需要，請新增 Flow 預設值。

安裝​

你也可以查看 React 入門頁面

npm install --save-dev @babel/preset-react

使用​

無選項

babel.config.json
{
  "presets": ["@babel/preset-react"]
}

有選項

babel.config.json
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement (only in classic runtime)
        "pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
        "throwIfNamespace": false, // defaults to true
        "runtime": "classic" // defaults to classic
        // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
      }
    ]
  ]
}

透過 CLI​

Shell
babel --presets @babel/preset-react script.js

透過 Node API​

JavaScript
require("@babel/core").transformSync("code", {
  presets: ["@babel/preset-react"],
});

選項​

兩個執行時間​

runtime​

classic | automatic，預設為 classic

已新增：v7.9.0

注意：預設執行時間將在 Babel 8 中切換為 automatic。

決定要使用哪個執行時間。

automatic 自動匯入 JSX 轉譯成的函式。classic 沒有自動匯入任何內容。

development​

boolean，預設為 false。

這會切換特定於開發的行為，例如新增 __source 和 __self。

這在與 env 選項 設定或 js 設定檔 結合使用時很有用。

throwIfNamespace​

boolean，預設為 true。

切換是否在使用 XML 名稱空間標籤名稱時擲回錯誤。例如

儘管 JSX 規範允許這樣做，但預設情況下會停用，因為 React 的 JSX 目前不支援它。

pure​

boolean，預設為 true。

啟用 @babel/plugin-transform-react-pure-annotations。它會將頂層 React 方法呼叫標記為純粹，以進行樹狀搖晃。

React 自動執行時間​

importSource​

string，預設為 react。

已新增：v7.9.0

在匯入函式時取代匯入來源。

React Classic Runtime​

pragma​

字串，預設為 React.createElement。

取代編譯 JSX 表達式時使用的函式。它應該是合格名稱（例如 React.createElement）或識別碼（例如 createElement）。

pragmaFrag​

字串，預設為 React.Fragment。

取代編譯 JSX 片段時使用的元件。它應該是有效的 JSX 標籤名稱。

useBuiltIns​

boolean，預設為 false。

警告

此選項將在 Babel 8 中移除。如果您鎖定的是現代瀏覽器，請將 useBuiltIns 設定為 true。

將使用原生內建，而不是嘗試為需要原生內建的任何外掛程式補充行為。

useSpread​

boolean，預設為 false。

新增於：v7.7.0

警告

此選項將在 Babel 8 中移除。如果您鎖定的是現代瀏覽器，請將 useSpread 設定為 true。

在擴充屬性時，直接使用包含擴充元素的內嵌物件，而不是 Babel 的 extend 輔助程式或 Object.assign。

:::

babel.config.js​

babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-react",
      {
        development: process.env.BABEL_ENV === "development",
      },
    ],
  ],
};

babel.config.json​

注意：env 選項可能很快就會過時

babel.config.json
{
  "presets": ["@babel/preset-react"],
  "env": {
    "development": {
      "presets": [["@babel/preset-react", { "development": true }]]
    }
  }
}

您可以在 這裡 閱讀更多關於設定預設選項的資訊