Skip to main content

@babel/preset-react

这个预设包含以下插件：

🌐 This preset includes the following plugins:

自动运行时（自 v7.9.0 起）在启用 development 选项时会自动为这些插件添加功能。如果你启用了自动运行时，再添加 @babel/plugin-transform-react-jsx-self 或 @babel/plugin-transform-react-jsx-source 就会报错。

🌐 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 预设。

安装​

🌐 Installation

你也可以查看 React 的 入门页面

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

用法​

🌐 Usage

🌐 With a configuration file (Recommended)

没有选项：

🌐 Without options:

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

有选项：

🌐 With options:

babel.config.json
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic", // defaults to automatic
        "importSource": "custom-jsx-library", // defaults to react(only in automatic runtime)
        "throwIfNamespace": false // defaults to true
        // "pragma": "dom", // default pragma is React.createElement (only in classic runtime)
        // "pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
      }
    ]
  ]
}

通过 CLI​

🌐 Via CLI

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

通过 Node API​

🌐 Via Node API

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

选项​

🌐 Options

两个运行时​

🌐 Both Runtimes

runtime​

classic | automatic，默认值为 automatic

已添加于：v7.9.0

🌐 Added in: v7.9.0

决定使用哪个运行时。

🌐 Decides which runtime to use.

automatic 会自动导入 JSX 转译所用的函数。classic 不会自动导入任何东西。

development​

boolean，如果 Babel 的 envName 是 "development"，则默认为 true，否则为 false。

这会切换与开发相关的行为，比如添加 __source 和 __self。

🌐 This toggles behavior specific to development, such as adding __source and __self.

当与 env 选项 配置或 js 配置文件 结合使用时，这很有用。

🌐 This is useful when combined with the env option configuration or js config files.

developmentSourceSelf​

boolean，默认值为 false。

当 true 时，这个插件会在 jsxDEV 调用中生成 __source 和 __self 参数。这些参数曾被旧版本的 React 用于开发警告，但从 React 19.2 开始已经被移除了。

🌐 When true, the plugin generates __source and __self arguments in jsxDEV calls. These were used by older versions of React for development warnings but have been removed since React 19.2.

如果你使用的 React 版本低于 19.2，或者使用依赖这些参数的自定义 JSX 运行时，就把这个设置为 true。

🌐 Set this to true if you are using a React version older than 19.2 or a custom JSX runtime that depends on these arguments.

throwIfNamespace​

boolean，默认值为 true。

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

🌐 Toggles whether or not to throw an error if a XML namespaced tag name is used. For example:

尽管 JSX 规范允许这样做，但默认情况下它是禁用的，因为 React 的 JSX 目前不支持它。

🌐 Though the JSX spec allows this, it is disabled by default since React's JSX does not currently have support for it.

pure​

boolean，默认值为 true。

启用 @babel/plugin-transform-react-pure-annotations。它会将顶层 React 方法调用标记为纯粹，以便进行树摇优化。

🌐 Enables @babel/plugin-transform-react-pure-annotations. It will mark top-level React method calls as pure for tree shaking.

React 自动运行时​

🌐 React Automatic Runtime

importSource​

string，默认值为 react。

已添加于：v7.9.0

🌐 Added in: v7.9.0

导入函数时替换导入源。

🌐 Replaces the import source when importing functions.

React 经典运行时​

🌐 React Classic Runtime

pragma​

string，默认是 React.createElement。

替换在编译 JSX 表达式时使用的函数。它应该是一个限定名称（例如 React.createElement）或一个标识符（例如 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，默认是 React.Fragment。

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

🌐 Replace the component used when compiling JSX fragments. It should be a valid JSX tag name.

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 }]]
    }
  }
}

你可以在这里阅读更多关于配置预设选项的信息