@babel/preset-react
此预设(preset)始终包含以下插件:
- @babel/plugin-syntax-jsx
- @babel/plugin-transform-react-jsx
- @babel/plugin-transform-react-display-name
如果开启了 development
参数,还将包含以下插件:
Classic runtime adds:
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 preset。
安装
你还可以查看 React 的 入门指南。
- npm
- Yarn
- pnpm
npm install --save-dev @babel/preset-react
yarn add --dev @babel/preset-react
pnpm add --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"],
});