如何用 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 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能

相关推荐
aqi007 小时前
15天学会AI应用开发(八)使用向量数据库实现RAG功能
人工智能·python·大模型·ai编程·ai应用
Csvn8 小时前
`functools.lru_cache` —— 一行代码搞定缓存加速
后端·python
金銀銅鐵1 天前
[Python] 从《千字文》中随机挑选汉字
后端·python
cup111 天前
[技术复盘] Windows Python 打包实战:Nuitka 环境踩坑总结与 CI 自动化构建全指南
python·ai·环境变量·ci·nuitka·skill
aqi001 天前
15天学会AI应用开发(七)有了大模型为什么还要引入RAG
人工智能·python·大模型·ai编程·ai应用
金銀銅鐵1 天前
用 Python 实现 Take-Away 游戏
python·游戏
copyer_xyf1 天前
Agent 流程编排
后端·python·agent
copyer_xyf1 天前
Agent RAG
后端·python·agent