跳至主要内容

@babel/preset-react

此预设始终包含以下插件

以及使用 development 选项时

经典运行时添加

自动运行时（自 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)
      }
    ]
  ]
}

通过 CLI​

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 方法调用标记为纯函数，以便进行摇树优化。

React 自动运行时​

importSource​

string，默认为 react。

添加于：v7.9.0

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

React 经典运行时​

pragma​

string，默认为 React.createElement。

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

pragmaFrag​

string，默认为 React.Fragment。

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

useBuiltIns​

boolean，默认为 false。

警告

此选项将在 Babel 8 中移除。如果您要面向现代浏览器，请将 useBuiltIns 设置为 true。

将使用原生内置函数，而不是尝试为任何需要它的插件进行 polyfill。

useSpread​

boolean，默认为 false。

添加于：v7.7.0

警告

此选项将在 Babel 8 中移除。如果您要面向现代浏览器，请将 useSpread 设置为 true。

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

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