箭头函数需通过Babel等工具链配置目标环境（如IE11、Node.js v6）自动降级为传统function，保持this绑定与语义正确；配置@babel/preset-env并指定targets即可实现AST级精准转换。

箭头函数（() => {}）是 ES6+ 语法，浏览器或 Node.js 环境若不支持（如旧版 IE、低版本 Node），需通过编译器（如 Babel）转为传统函数（function）。关键不是“在编译器中怎么转换”，而是**如何配置编译工具链，让箭头函数被自动、正确地降级**。

确认目标运行环境的兼容性

先明确你要支持的最低环境版本：

• Node.js：v4+ 原生支持箭头函数；v0.12 或更早需转译
• 浏览器：Chrome 45+、Firefox 22+、Safari 10+、Edge 12+ 均支持；IE 完全不支持，必须转译
• 若项目需兼容 IE11 或 Node.js v6，就必须启用 Babel 转译

用 Babel 正确配置箭头函数转译

Babel 默认不会自动降级语法——需显式指定目标环境或预设：

• 安装必要依赖：npm install --save-dev @babel/core @babel/preset-env babel-loader
• 在 babel.config.json 中配置：
  

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "ie": "11",
          "node": "current"
        }
      }]
    ]
  }

• 该配置会让 Babel 自动识别箭头函数，并转成 function() {} 形式，同时保留词法作用域（this、arguments 等行为仍符合预期）

注意：箭头函数转译 ≠ 简单文本替换

Babel 不是做字符串替换，而是基于 AST 进行语义转换。例如：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

立即学习“Java免费学习笔记（深入）”；

const nums = [1, 2, 3];
const doubled = nums.map(x => x * 2);

会被转译为：

var nums = [1, 2, 3];
var doubled = nums.map(function (x) {
  return x * 2;
});

重点在于：内部的 this 绑定、参数处理、返回值逻辑均保持原意，不会因转译出错。

验证是否生效的小技巧

• 运行 npx babel src/index.js --out-file dist/index.js，查看输出文件是否含 function 而非 =>
• 在 Webpack/Vite 中启用 source-map，调试时可对照原始箭头函数断点
• 用 Babel REPL 粘贴代码，实时看转译结果