跳至主内容

@babel/preset-react

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

该预设始终包含以下插件：

启用 development 选项时：

经典运行时（classic runtime）会额外添加：

自动运行时（automatic runtime，自 v7.9.0 起）在启用 development 选项时会自动包含这些插件的功能。若已启用自动运行时，再添加 @babel/plugin-transform-react-jsx-self 或 @babel/plugin-transform-react-jsx-source 将导致错误。

注意：v7 中已不再默认启用 Flow 语法支持。如需使用，请额外添加 Flow 预设。

安装​

另请参考 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)
      }
    ]
  ]
}

通过命令行​

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

通过 Node API​

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

配置选项​

通用配置（两种运行时）​

runtime​

classic | automatic，默认值为 classic

添加于：v7.9.0

注意：Babel 8 中默认运行时将切换为 automatic。

决定使用哪种运行时。

automatic 运行时自动导入 JSX 编译所需的函数，classic 运行时则不会自动导入任何内容。

development​

boolean 类型，默认值为 false。

用于切换开发环境特有的行为，例如添加 __source 和 __self 等调试属性。

此选项与 env 配置 或 JS 配置文件 结合使用效果更佳。

throwIfNamespace​

boolean 类型，默认值为 true。

控制当使用 XML 命名空间标签名时是否抛出错误，例如：

虽然 JSX 规范允许此用法，但默认禁用该功能，因为 React 的 JSX 目前不支持此特性。

pure​

boolean 类型，默认值为 true。

启用 @babel/plugin-transform-react-pure-annotations 插件，将顶层的 React 方法调用标记为纯函数以支持 tree shaking。

React 自动运行时配置​

importSource​

string 类型，默认值为 react。

添加于：v7.9.0

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

React 经典运行时配置​

pragma​

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

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

pragmaFrag​

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

替换编译 JSX Fragments 时使用的组件。它必须是一个有效的 JSX 标签名。

useBuiltIns​

boolean 类型，默认值为 false。

警告

此选项将在 Babel 8 中被移除。如果你的目标环境是现代浏览器，请将 useBuiltIns 设置为 true。

对于需要 polyfill 行为的插件，该选项将直接使用原生的内置实现，而不是尝试添加 polyfill。

useSpread​

boolean 类型，默认值为 false。

添加于：v7.7.0

警告

此选项将在 Babel 8 中被移除。如果你的目标环境是现代浏览器，请将 useSpread 设置为 true。

在展开属性时，直接使用带有展开运算符的内联对象，而不是 Babel 的 extend 辅助函数或 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 }]]
    }
  }
}

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