【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
相关推荐
广州华水科技6 小时前
单北斗GNSS形变监测系统在桥梁安全中的应用与技术解析
前端
打小就很皮...6 小时前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
IT_陈寒6 小时前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit6 小时前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢6 小时前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
HHHHHY7 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js
小芒果nana7 小时前
React入门-JSX
react.js
用户352120195607 小时前
React-router v7
前端
Mintopia7 小时前
⚡ AI 时代,全栈 Next.js 开发的激情在哪里?
前端·aigc·全栈
Hello123网站7 小时前
300多个Html5小游戏列表和下载地址
前端·html·html5