跳到主要内容

@babel/preset-react

This preset includes the following plugins:

Automatic runtime (since v7.9.0) adds the functionality for these plugins automatically when the development option is enabled. If you have automatic runtime enabled, adding @babel/plugin-transform-react-jsx-self or @babel/plugin-transform-react-jsx-source will error.

注意：在 v7 版本中将不再开启对 Flow 语法的支持。如果仍需支持，需要添加 Flow preset。

安装​

你还可以查看 React 的 入门指南

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

用法​

通过配置文件（推荐）​

不带参数：

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

带参数：

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

通过命令行工具（CLI）​

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

通过 Node API​

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

参数​

Both Runtimes​

runtime​

classic | automatic，默认值为 automatic

添加于： v7.9.0

用于决定使用哪个运行时。

当设置为 automatic 时，将自动导入（import）JSX 转换而来的函数。当设置为 classic 时，不会自动导入（import）任何东西。

development​

boolean, defaults to true if Babel's envName id "development", and false otherwise.

This toggles behavior specific to development, such as adding __source and __self.

This is useful when combined with the env option configuration or js config files.

developmentSourceSelf​

boolean, defaults to false.

When true, the plugin generates __source and __self arguments in jsxDEV calls. These were used by older versions of React for development warnings but have been removed since React 19.2.

Set this to true if you are using a React version older than 19.2 or a custom JSX runtime that depends on these arguments.

throwIfNamespace​

boolean, defaults to true.

Toggles whether or not to throw an error if a XML namespaced tag name is used. For example:

虽然 JSX 规范允许这样做，但是默认情况下是被禁止的，因为 React 所实现的 JSX 目前并不支持这种方式。

pure​

boolean, defaults to true.

Enables @babel/plugin-transform-react-pure-annotations. It will mark top-level React method calls as pure for tree shaking.

React Automatic Runtime​

importSource​

string 类型，默认值为 true。

添加于： v7.9.0

Replaces the import source when importing functions.

React Classic Runtime​

pragma​

string, defaults to React.createElement.

Replace the function used when compiling JSX expressions. It should be a qualified name (e.g. React.createElement) or an identifier (e.g. createElement).

pragmaFrag​

string, defaults to React.Fragment.

Replace the component used when compiling JSX fragments. It should be a valid JSX tag name.

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 }]]
    }
  }
}

You can read more about configuring preset options here