@babel/preset-react

此预设（preset）始终包含以下插件：

• @babel/plugin-syntax-jsx
• @babel/plugin-transform-react-jsx
• @babel/plugin-transform-react-display-name

如果开启了 development 参数，还将包含以下插件：

Classic runtime adds:

• @babel/plugin-transform-react-jsx-self
• @babel/plugin-transform-react-jsx-source

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
• Yarn
• pnpm

pnpm add --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"],
});

参数​

Both Runtimes​

runtime​

classic | automatic，默认值为 classic

添加于： v7.9.0

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

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

development​

boolean 类型，默认值为 false.

这可以用于开启特定于开发环境的某些行为，例如添加 __source 和 __self。

在与 env 参数 配置或 js 配置文件 配合使用时，此功能很有用。

throwIfNamespace​

boolean, defaults to true.

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

<f:image />

虽然 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.

useBuiltIns​

boolean, defaults to false.

Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.

useSpread​

boolean, defaults to false.

Added in: v7.7.0

When spreading props, use inline object with spread elements directly instead of Babel's extend helper or 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 }]]
    }
  }
}

You can read more about configuring preset options here