如何用 Babel 将最新的 JS 特性转译为旧版浏览器兼容代码

Babel 7+ 配置必须用 exports.default；targets 需明确指定浏览器版本；React 17+ 需 preset-react 启用 automatic runtime；避免 loose 全局启用和插件重复；现代 node_modules 包需显式转译。babel.config.js 配置必须用 exports.default 而不是 module.exports很多人在 babel.config.js 里写 module.exports = { presets: [...] }，结果 Babel 完全不生效——尤其在 monorepo 或使用 @babel/cli 时。Babel 7+ 默认只认 exports.default，这是它读取配置的约定，不是可选项。实操建议：始终用 module.exports = { presets: [...] } 是错的；正确写法是 exports.default = { presets: [...] }如果项目用了 TypeScript，别在 babel.config.js 里 import 类型，Babel 不执行 TS 编译；类型注解会直接报错 SyntaxError: Unexpected token 'export'配置里加 sourceType: 'unambiguous' 可避免 ES 模块识别失败，尤其处理无 import/export 但含 async/await 的文件时@babel/preset-env 的 targets 必须明确指定浏览器范围只写 { "presets": ["@babel/preset-env"] }，Babel 默认按 targets: { node: "current" } 处理，结果代码完全没降级，Chrome 90+ 的特性原样输出，IE11 或 Safari 12 直接报错 SyntaxError: Invalid regular expression flag 'd'（因为 /d 标志未被转译）。实操建议：用 targets: { chrome: "58", safari: "12", ie: "11" } 这类具体版本，而不是 "last 2 versions"（后者对旧版浏览器覆盖不可靠）配合 core-js 时，useBuiltIns: "usage" 必须搭配 corejs: 3，否则 Array.from 等新 API 不注入 polyfill若用 Webpack，确保 babel-loader 的 exclude 没误排除 node_modules 中需转译的依赖（比如某些现代 UI 库）JSX 和 React 用户必须配 @babel/preset-react，且注意 runtime 区别React 17+ 默认启用新的 JSX 转换，但 Babel 不自动适配：没配 @babel/preset-react 时，<div></div> 会变成 React.createElement("div")，而新 runtime 要求 jsx 函数调用；结果运行时报错 ReferenceError: jsx is not defined。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能