040 babel/preset-react

最新推荐文章于 2025-03-21 20:36:22 发布

Michael18811380328

最新推荐文章于 2025-03-21 20:36:22 发布

阅读量427

点赞数

文章标签： react.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.csdn.net/weixin_41697143/article/details/129011854

版权

babel/preset-react是一个用于处理ReactJSX的预设，包括@babel/plugin-syntax-jsx和@babel/plugin-transform-react-jsx等插件。在开发模式下，它会添加额外的功能。用户可以设置runtime选项来选择经典或自动运行时，并自定义pragma和pragmaFrag。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

040 babel/preset-react

开发中使用的库

用途

处理 react 的预设，包括下面的插件(编译jsx)

This preset always includes the following plugins:

@babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx @babel/plugin-transform-react-display-name And with the development option:

Classic runtime adds:

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

官网链接

https://babeljs.io/docs/en/babel-preset-react

基本使用

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

{
  "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)
      }
    ]
  ]
}