Babel配置browserslist时指定Edge版本不起作用怎么办？

我一般直接在根目录用 .browserslistrc 文件写字符串配置，别用 package.json 的对象格式。改成这样：

last 2 Edge versions

Edge >= 110

然后清缓存重新编译，Babel 就认了。

这个问题的关键是，Babel本身并不直接依赖 browserslist 的配置来决定如何转译代码。它需要通过插件或预设（比如 @babel/preset-env）来将 browserslist 的目标浏览器版本映射为具体的语法和功能支持。如果你的配置看起来没问题但仍然不起作用，很可能是某个环节出了问题。

### 1. 检查 Babel 配置是否正确引用了 @babel/preset-env
首先确保你的 Babel 配置文件中使用了 @babel/preset-env，并且正确地指定了 targets 属性会从 browserslist 获取目标浏览器版本。

如果你用的是 .babelrc 或 babel.config.js，检查以下内容：

// babel.config.js 示例

module.exports = {

  presets: [

    [

      '@babel/preset-env',

      {

        // 确保 targets 使用 browserslist

        useBuiltIns: 'usage', // 如果你需要 polyfill，设置为 'usage' 或 'entry'

        corejs: 3,           // 如果 useBuiltIns 不是 false，记得指定 core-js 版本

        debug: true,         // 开启调试模式，看看实际编译的目标是什么

      },

    ],

  ],

};

如果没有正确配置 @babel/preset-env，即使 browserslist 写得再对也没用。

---

### 2. 确认 browserslist 是否被正确读取
有时候 Babel 可能没有正确加载到 browserslist 的配置。你可以手动测试一下：

在终端运行：

npx browserslist

这个命令会输出当前项目中 browserslist 的解析结果。如果你看到的结果不包含 Edge 110，那说明 browserslist 的配置有问题。

注意：Edge 的版本号可能会有些诡异，因为它的内核已经切换到 Chromium。所以 Edge 110 实际上可能对应的是 Chromium 的某个版本号。如果不确定，可以用更通用的方式写，比如：

"production": ["last 2 Edge versions", "not dead"]

---

### 3. 箭头函数的问题
箭头函数 (=>) 在现代浏览器中基本都支持，但如果你的项目中用了 useBuiltIns: 'usage' 并且引入了旧版的 polyfill，可能会导致一些混淆。确保以下几点：

- **不要混用老旧的 polyfill**：如果你之前手动引入过类似 es5-shim 或者其他全局 polyfill，可能会干扰 Babel 的行为。
- **核心问题**：如果你的代码在 Edge 110 中报错说不支持箭头函数，那很可能是因为编译后的代码没有正确转译成兼容的语法。这通常是因为 @babel/preset-env 没有正确识别到目标浏览器。

---

### 4. 调试编译后的代码
为了进一步确认问题，可以手动检查 Babel 编译后的代码。假设你有一段源码：

const add = (a, b) => a + b;

console.log(add(1, 2));

编译后应该变成：

var add = function (a, b) {

  return a + b;

};

console.log(add(1, 2));

如果编译结果仍然是箭头函数，那说明 Babel 没有按照预期进行转译。

---

### 5. 其他可能的原因
- **缓存问题**：有时候 Babel 的缓存会导致配置修改后没有生效。尝试清理缓存：

rm -rf node_modules/.cache/babel-loader

- **插件版本冲突**：确保你的 Babel 相关依赖版本一致，尤其是 @babel/core 和 @babel/preset-env 的版本要匹配。
- **Node.js 版本**：低版本的 Node.js 可能会导致某些工具行为异常。建议使用 Node.js 16+。

---

### 总结
按照上面的步骤逐一排查，基本上能找到问题所在。如果还是不行，可以把你的 Babel 配置、package.json 里的相关部分贴出来，我可以帮你进一步分析。

最后吐槽一句，每次配置 Babel 都让我想重新做人... 😅