如何编译并Polyfill Fetch API与Promise以实现最优浏览器兼容？

你遇到的问题其实很常见：Babel默认只转译ES6+的语法（比如const转var），但不会补全浏览器缺失的全局API（比如Promise和fetch）。要让这些API在旧浏览器里正常工作，需要结合语法转译+Polyfill的方案，下面一步步给你讲清楚：

一、先搞懂核心区别：语法转译 vs API补全 #

• 语法转译：Babel处理的是"语法层面"的转换，比如把const、箭头函数、解构赋值这些ES6语法转换成ES5能理解的写法——这就是你看到的编译结果。
• API补全：旧浏览器（比如IE9-11、旧版Chrome/Firefox）根本没有Promise和fetch这些全局对象，这时候需要用**Polyfill（代码垫片）**来给浏览器补上这些缺失的API。

二、具体解决方案 #

方案1：用core-js（Babel官方推荐的完整Polyfill方案） #

core-js是目前最全面的ES标准库Polyfill，能覆盖Promise、fetch以及其他ES6+ API，而且支持按需引入，不会打包多余代码。

步骤：

1. 安装依赖：

   npm install core-js regenerator-runtime --save-dev
   

2. 配置Babel（比如在babel.config.json里）：

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "usage", // 自动按需引入需要的Polyfill
           "corejs": 3 // 指定core-js版本
         }
       ]
     ]
   }
   

3. 现在重新编译你的代码，Babel会自动在需要的地方注入Promise和fetch的Polyfill，旧浏览器就能正常识别这些API了。

方案2：单独引入针对性Polyfill（轻量方案） #

如果你只需要补全Promise和fetch，不想引入整个core-js，可以用专门的垫片：

• es6-promise：补全Promise API
• whatwg-fetch：补全fetch API

步骤：

1. 安装依赖：

   npm install es6-promise whatwg-fetch --save-dev
   

2. 在你的项目入口文件顶部引入：

   // 先补全Promise，因为fetch依赖Promise
   import 'es6-promise/auto';
   import 'whatwg-fetch';
   
   // 然后写你的业务代码
   const image = document.querySelector('.my-image');
   fetch('flowers.jpg').then(function(response) {
     return response.blob();
   }).then(function(blob) {
     const objectURL = URL.createObjectURL(blob);
     image.src = objectURL;
   });
   

3. 如果是非模块化项目（不用webpack等构建工具），可以直接用script标签在HTML里引入：

   <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3/dist/fetch.umd.min.js"></script>
   <script>
     // 你的fetch代码
   </script>
   

三、优化建议：按需加载Polyfill #

为了减少现代浏览器的代码体积，可以只在旧浏览器里加载Polyfill：

// 检查浏览器是否支持Promise和fetch
if (!window.Promise || !window.fetch) {
  // 动态加载Polyfill脚本
  const script = document.createElement('script');
  script.src = 'path/to/your/polyfill-bundle.js'; // 把es6-promise和whatwg-fetch打包成一个文件
  document.head.appendChild(script);
  script.onload = function() {
    // Polyfill加载完成后执行业务代码
    initFetch();
  };
} else {
  // 现代浏览器直接执行
  initFetch();
}

function initFetch() {
  const image = document.querySelector('.my-image');
  fetch('flowers.jpg').then(function(response) {
    return response.blob();
  }).then(function(blob) {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });
}

四、验证支持范围 #

这些Polyfill可以支持到：

• IE9及以上
• 所有现代浏览器（Chrome、Firefox、Safari、Edge）
• 旧版移动浏览器（比如Android 4.4+）

内容的提问来源于stack exchange，提问作者El-Santo