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

田本初2024-10-15 14:47

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

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

javascript 复制代码

cd your_project
npx react-codemod update-react-imports