如何让ES6 Promise在IE10、IE11及Safari中兼容？Babel转码无效

嘿，我来帮你搞定这个兼容性难题！你遇到的Babel转译后代码无变化的问题，大概率是因为配置没明确指定要兼容的旧浏览器，也没处理ES6的原生API（比如Promise）。下面一步步来解决：

1. 配置Babel以适配目标浏览器 #

你需要用@babel/preset-env并明确指定要兼容的浏览器版本，这样Babel才知道哪些语法和API需要转译/补全。

具体步骤： #

• 先安装必要依赖：

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install core-js@3  # 用于补全ES6+的原生API（比如Promise）

• 在项目根目录创建babel.config.json文件，填入以下配置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "10",
          "safari": "9"  # 根据你需要兼容的Safari具体版本调整
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

这里useBuiltIns: "usage"会自动根据你的代码和目标浏览器，按需引入core-js的补全代码，不用手动全局引入所有polyfill，既高效又不会冗余。

2. 重新执行转译命令 #

现在运行Babel转译你的代码，比如：

npx babel your-modal-code.js --out-file modal-es5-compatible.js

这时候你会发现：

• 箭头函数element => { ... }会被转成普通的function(element) { ... }
• 原本IE10/11不支持的Promise，会被core-js自动补全实现

3. 针对你的代码的细节说明 #

你的代码里有两个核心兼容点：

• 箭头函数：转译后会变成普通函数，同时Babel会帮你处理this的绑定逻辑（不过你已经提前用var that = this做了处理，转译后依然能正常工作）
• Promise：IE10/11原生完全没有Promise对象，core-js会为这些浏览器补上完整的Promise实现，Promise.all也能正常触发回调

转译后的代码大概是这个样子（简化版）：

// 重写Modal.js的show方法
(function ModalController() {
  var show = Modal.prototype.show;
  Modal.prototype.show = function () {
    // 翻译设置按钮
    var promises = [];
    var that = this;
    this.settings.buttons.forEach(function (element) {
      var promise = Globalize.translate(element.label);
      promises.push(promise);
      promise.then(function (data) {
        element.label = data;
      });
    });
    // 所有组件翻译完成后
    Promise.all(promises).then(function (values) {
      show.apply(that, []);
    });
  };
})();

（实际转译后的代码会包含core-js的按需补全片段，确保旧浏览器能识别Promise）

4. 最后验证兼容性 #

把转译后的代码替换到项目中，在IE10/11和目标Safari版本里测试，确认Modal的show方法能正常完成翻译并弹出窗口。

内容的提问来源于stack exchange，提问作者Abdessamad Jadid