Question

此 preset 始终包含以下插件：

• @babel/plugin-syntax-jsx
• @babel/plugin-transform-react-jsx
• @babel/plugin-transform-react-display-name

And with the development option:

• @babel/plugin-transform-react-jsx-self
• @babel/plugin-transform-react-jsx-source

注意：在 v7 版本中将不再开启对 Flow 语法的支持。如果仍需支持，需要添加 Flow preset。

安装

你还可以查看 React 的 入门指南。

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

用法

通过 .babelrc 配置文件（推荐）

.babelrc

不带参数：

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

带参数：

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement
        "pragmaFrag": "DomFrag", // default is React.Fragment
        "throwIfNamespace": false // defaults to true
      }
    ]
  ]
}

通过命令行工具（CLI）

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

通过 Node API

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

参数

pragma

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

编译 JSX 表达式时替用于换所使用的函数（function）。

pragmaFrag

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

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

useBuiltIns

boolean 类型，默认值为 false.

当插件需要某项功能时，此参数用于确定是使用内置功能还是通过 polyfill 来模拟。

development

boolean 类型，默认值为 false.

用于确定是否开启用于辅助开发的插件，例如 @babel/plugin-transform-react-jsx-self 和 @babel/plugin-transform-react-jsx-source。

当与 env 参数 配置或 js 配置文件 一同使用时会非常有用。

throwIfNamespace

boolean 类型，默认值为 true.

如果使用了 XML 命名空间标签，此参数用于设置是否抛出错误。例如：

<f:image />

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

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