Edit

@babel/preset-react

这个预设包含以下插件：

并且有相应的开发配置项：

添加经典的运行时：

当启用 development 配置时，自动运行时（自 v7.9.0 起）会自动添加这些插件的功能。如果你已经启用了自动运行时，再添加 @babel/plugin-transform-react-jsx-self 或 @babel/plugin-transform-react-jsx-source 会发生错误。

注意: v7 中不再支持 Flow 语法。因此，你需要添加 Flow preset 预设。

安装

您可以查看 React 开始页面

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

用法

通过配置文件使用（推荐）

不带参数：

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

带参数：

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // 默认是 React.createElement（仅在经典的运行时中）
        "pragmaFrag": "DomFrag", // 默认是 React.Fragment（仅在经典的运行时中）
        "throwIfNamespace": false, // 默认是 true
        "runtime": "classic" // 默认是 classic
        // "importSource": "custom-jsx-library" // 默认是 react（仅在经典的运行时中）
      }
    ]
  ]
}

通过命令行工具使用（CLI）

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

通过 Node API 使用

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

配置

两种不同的运行时

runtime

classic | automatic，默认值为 classic

已经添加到了：v7.9.0

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

automatic 表示自动导入 JSX 转换而来的函数。 classic 表示不会自动导入任何东西。

development

boolean 类型，默认值为 false。

如果添加了 __source 和 __self，将可以开启特定于开发环境的一些操作。

当与 env option 配置或者与 js config files 一起使用时会很有用。

throwIfNamespace

boolean，默认 true。

选择是否在 XML 命名空间标签名称被使用时抛出错误。例如：

<f:image />

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

pure

boolean，默认为 true。

开启 @babel/plugin-transform-react-pure-annotations。它将把顶层的 React 方法调用标记为 pure，用于树状摇动。

React 自动运行时

importSource

string 类型，默认值为 react。

已经添加到了：v7.9.0

在导入函数时替换导入源。

React Classic Runtime

pragma

string 类型，默认值为 React.createElement。

替换编译 JSX 表达式时使用的函数。

pragmaFrag

string 类型，默认值为 React.Fragment。

替换编译 JSX 片段时使用的组件。

useBuiltIns

boolean 类型，默认值为 false。

将使用原生配置，打包后的文件不使用 polyfill 来进行适配。

useSpread

boolean 类型，默认值为 false。

已经添加到了：v7.7.0

当传递 props 时，直接使用带有传递元素的内联对象，而不是 Babel 的扩展工具或 Object.assign。

.babelrc.js

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

.babelrc

注意: env 参数可能很快就会被弃用

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

您可以 此处 阅读有关配置预设参数的更多信息。

← @babel/preset-env@babel/preset-typescript →