# @babel/预设反应
此预设（preset）始终包含以下插件：
@babel/plugin-syntax-jsx@babel/plugin-transform-react-jsx@babel/plugin-transform-react-display-name
如果开启了 development参数，还将包含以下插件：
经典运行时添加：
@babel/plugin-transform-react-jsx-self@babel/plugin-transform-react-jsx-source
自动运行时（自）在启用该选项v7.9.0时自动为这些插件添加功能。development如果启用了自动运行时，添加@babel/plugin-transform-react-jsx-self (opens new window) 或@babel/plugin-transform-react-jsx-source (opens new window) 将出错。
注意：在 v7 版本中将不再开启对 Flow 语法的支持。如果仍需支持，需要添加
Flow preset。
# 安装 (opens new window)
你还可以查看 React 的
入门指南。
- npm
npm install --save-dev @babel/preset-react
- yarn
yarn add --dev @babel/preset-react
# 用法 (opens new window)
# 通过配置文件（推荐） (opens new window)
不带参数：
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） (opens new window)
babel --presets @babel/preset-react script.js
# 通过 Node API
JavaScript
require("@babel/core").transformSync("code", {
presets: ["@babel/preset-react"],
});
# 参数 (opens new window)
# 两个运行时 (opens new window)
# runtime (opens new window)
classic | automatic，默认值为 classic
添加于： v7.9.0
用于决定使用哪个运行时。
当设置为 automatic时，将自动导入（import）JSX 转换而来的函数。当设置为 classic时，不会自动导入（import）任何东西。
# development (opens new window)
boolean类型，默认值为 false.
这可以用于开启特定于开发环境的某些行为，例如添加 __source和 __self。
在与 env 参数 配置或 js 配置文件 配合使用时，此功能很有用。
# throwIfNamespace (opens new window)
boolean, 默认为true.
切换是否在使用 XML 命名空间标记名称时抛出错误。例如：
<f:image />
虽然 JSX 规范允许这样做，但是默认情况下是被禁止的，因为 React 所实现的 JSX 目前并不支持这种方式。
# pure (opens new window)
boolean, 默认为true.
启用@babel/plugin-transform-react-pure-annotations。它会将顶级 React 方法调用标记为纯粹的 tree shaking。
# React 自动运行时 (opens new window)
# 导入源
string类型，默认值为 true。
添加于：v7.9.0
导入函数时替换导入源。
# React 经典运行时 (opens new window)
# pragma (opens new window)
string, 默认为React.createElement.
替换编译 JSX 表达式时使用的函数。它应该是限定名称（例如React.createElement）或标识符（例如createElement）。
# pragmaFrag (opens new window)
string, 默认为React.Fragment.
替换编译 JSX 片段时使用的组件。它应该是一个有效的 JSX 标签名。
# useBuiltIns (opens new window)
boolean, 默认为false.
将使用本机内置而不是尝试为任何需要一个的插件填充行为。
# useSpread (opens new window)
boolean, 默认为false.
添加于：v7.7.0
传播 props 时，直接使用带有传播元素的内联对象，而不是 Babel 的扩展助手或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 }]]
}
}
}
您可以在此处阅读有关配置预设选项的更多信息