@babel/预设反应

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

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

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

经典运行时添加：

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

自动运行时（自）在启用该选项v7.9.0时自动为这些插件添加功能。development如果启用了自动运行时，添加@babel/plugin-transform-react-jsx-self (opens new window) 或@babel/plugin-transform-react-jsx-source (opens new window) 将出错。

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

安装​ (opens new window)

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

• npm

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

• yarn

yarn add --dev @babel/preset-react

用法​ (opens new window)

通过配置文件（推荐）​ (opens new window)

不带参数：

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）​ (opens new window)

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

通过 Node API​

JavaScript

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

参数​ (opens new window)

两个运行时 (opens new window)

runtime​ (opens new window)

classic | automatic，默认值为 classic

添加于： v7.9.0

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

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

development​ (opens new window)

boolean类型，默认值为 false.

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

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

throwIfNamespace​ (opens new window)

boolean, 默认为true.

切换是否在使用 XML 命名空间标记名称时抛出错误。例如：

<f:image />

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

pure​ (opens new window)

boolean, 默认为true.

启用@babel/plugin-transform-react-pure-annotations。它会将顶级 React 方法调用标记为纯粹的 tree shaking。

React 自动运行时 (opens new window)

导入源

string类型，默认值为 true。

添加于：v7.9.0

导入函数时替换导入源。

React 经典运行时 (opens new window)

pragma​ (opens new window)

string, 默认为React.createElement.

替换编译 JSX 表达式时使用的函数。它应该是限定名称（例如React.createElement）或标识符（例如createElement）。

pragmaFrag​ (opens new window)

string, 默认为React.Fragment.

替换编译 JSX 片段时使用的组件。它应该是一个有效的 JSX 标签名。

useBuiltIns​ (opens new window)

boolean, 默认为false.

将使用本机内置而不是尝试为任何需要一个的插件填充行为。

useSpread​ (opens new window)

boolean, 默认为false.

添加于：v7.7.0

传播 props 时，直接使用带有传播元素的内联对象，而不是 Babel 的扩展助手或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 }]]
    }
  }
}

您可以在此处 阅读有关配置预设选项的更多信息