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

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

Babel版本

首先 Babel 要使用 V7.9.0 以上

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

npm update @babel/core @babel/plugin-transform-react-jsx

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

npm update @babel/core @babel/preset-react

配置

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

.babelrc 配置如下：
使用 @babel/preset-react

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

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

{
    
    
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
    
    
      "runtime": "automatic"
    }]
  ]
}

删除项目中原有的React引入

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

cd your_project
npx react-codemod update-react-imports