【React】React17+配置Babel实现无需导入React就可以使用jsx

React17以后,无需引入React包,就可以使用jsx语法,官网说明

Babel版本

首先 Babel 要使用 V7.9.0 以上

如果使用的是 @babel/plugin-transform-react-jsx

javascript 复制代码
npm update @babel/core @babel/plugin-transform-react-jsx

如果使用的是 @babel/preset-react

javascript 复制代码
npm update @babel/core @babel/preset-react

配置

旧的转换的默认选项为 {"runtime": "classic"},改为 {"runtime": "automatic"}

.babelrc 配置如下:

使用 @babel/preset-react

javascript 复制代码
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

使用 @babel/plugin-transform-react-jsx

javascript 复制代码
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

删除项目中原有的React引入

因为新的 JSX 转换会自动引入必要的 react/jsx-runtime 函数,因此使用 JSX 时,将无需再引入 React,保留也无伤大雅。

javascript 复制代码
cd your_project
npx react-codemod update-react-imports
相关推荐
伍哥的传说12 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783813 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊25 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
马特说2 小时前
React金融数据分析应用性能优化实战:借助AI辅助解决18万数据量栈溢出Bug
react.js·金融·数据分析
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript