react


此 preset 始终包含以下插件:

And with the development option:

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

安装

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

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

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

用法

通过 .babelrc 配置文件(推荐)

.babelrc

不带参数:

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

带参数:

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

通过命令行工具(CLI)

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

通过 Node API

 javascript
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.

用于确定是否开启用于辅助开发的插件,例如 code>@babel/plugin-transform-react-jsx-self</codecode>@babel/plugin-transform-react-jsx-source</code

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

throwIfNamespace

boolean 类型,默认值为 true.

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


<f:image />

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

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

注意: env 参数可能很快将被废弃

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

← flowminify →

来源:Js中文网 – 前端进阶资源教程
链接:https://www.javascriptc.com/docs/babel-manual/babel-preset-react

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界