Skip to main content

@babel/preset-react

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

¥This preset always includes the following plugins:

使用 development 选项：

¥And with the development option:

经典运行时添加：

¥Classic runtime adds:

启用 development 选项时，自动运行时（自 v7.9.0 起）会自动为这些插件添加功能。如果你启用了自动运行时，添加 @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 预设。

¥Note: Flow syntax support is no longer enabled in v7. For that, you will need to add the Flow preset.

安装​

¥Installation

你还可以查看 React 入门页面

¥You can also check out the React Getting Started page

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",
      {
        "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​

¥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，默认为 classic

¥classic | automatic, defaults to classic

添加于：v7.9.0

¥Added in: v7.9.0

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

¥Note: The default runtime will be switched to automatic in Babel 8.

决定使用哪个运行时。

¥Decides which runtime to use.

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

¥automatic auto imports the functions that JSX transpiles to. classic does not automatic import anything.

development​

boolean，默认为 false。

¥boolean, defaults to false.

这会切换特定于开发的行为，例如添加 __source 和 __self。

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

这在与 环境选项 配置或 js 配置文件 结合使用时很有用。

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

throwIfNamespace​

boolean，默认为 true。

¥boolean, defaults to true.

如果使用 XML 命名空间标记名称，则切换是否引发错误。例如：

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

<f:image />

尽管 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。

¥boolean, defaults to 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。

¥string, defaults to react.

添加于：v7.9.0

¥Added in: v7.9.0

导入函数时替换导入源。

¥Replaces the import source when importing functions.

React 经典运行时​

¥React Classic Runtime

pragma​

string，默认为 React.createElement。

¥string, defaults to 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。

¥string, defaults to React.Fragment.

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

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

useBuiltIns​

boolean，默认为 false。

¥boolean, defaults to false.

警告

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

¥This option will be removed in Babel 8. Set useBuiltIns to true if you are targeting to modern browsers.

将使用原生内置而不是尝试为任何需要的插件填充行为。

¥Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.

useSpread​

boolean，默认为 false。

¥boolean, defaults to false.

添加于：v7.7.0

¥Added in: v7.7.0

警告

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

¥This option will be removed in Babel 8. Set useSpread to true if you are targeting to modern browsers.

展开 props 时，直接使用带有展开元素的内联对象，而不是 Babel 的扩展助手或 Object.assign。

¥When spreading props, use inline object with spread elements directly instead of Babel's extend helper or Object.assign.

:::

babel.config.js​

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

babel.config.json​

注意：env 选项可能很快就会被弃用

¥Note: the env option will likely get deprecated soon

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

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

¥You can read more about configuring preset options here