跳到主要内容

@babel/preset-react

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

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

Classic runtime adds:

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",
      {
        "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

Note: The default runtime will be switched to automatic in Babel 8.

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

当设置为 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:

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

注意

This option will be removed in Babel 8. Set useBuiltIns to true if you are targeting to modern browsers.

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

注意

This option will be removed in Babel 8. Set useSpread to true if you are targeting to modern browsers.

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