如何使用 Babel 编译 ES6 代码并同时支持 Polyfill

ES6 是 JavaScript 的一个重大更新版本，它引入了许多新的语言特性和 API，使得我们能够更加方便、高效地编写代码。然而，由于不同浏览器对 ES6 特性的支持程度不同，我们需要使用 Babel 编译器将 ES6 代码转换为 ES5 代码，以便在所有浏览器中运行。同时，为了支持一些浏览器缺失的 API，我们还需要使用 Polyfill。

Babel 的安装和配置

1. 安装 Babel

   npm install --save-dev @babel/core @babel/cli @babel/preset-env

   这里我们安装了 Babel 的核心模块 @babel/core、命令行工具 @babel/cli 和预设 @babel/preset-env。

2. 配置 Babel

   在项目根目录下创建一个 .babelrc 文件，用于配置 Babel 的参数。

   // javascriptcn.com 代码示例
   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": {
             "browsers": ["last 2 versions", "ie >= 10"]
           },
           "useBuiltIns": "usage",
           "corejs": 3
         }
       ]
     ]
   }

   这里我们使用 @babel/preset-env 预设，将 ES6 代码转换为 ES5 代码，并根据浏览器的支持情况进行必要的转换。其中，targets 字段指定了要支持的浏览器版本，useBuiltIns 字段指定了如何引入 Polyfill，corejs 字段指定了使用的 core-js 版本。

Polyfill 的安装和配置

1. 安装 Polyfill

   npm install --save core-js

   这里我们安装了 core-js，它是一个提供了许多浏览器缺失的 API 的 Polyfill 库。

2. 配置 Polyfill

   在入口文件（比如 index.js）中引入 Polyfill：

   import 'core-js/stable';
   import 'regenerator-runtime/runtime';

   这里我们使用了 core-js/stable 模块和 regenerator-runtime/runtime 模块，分别提供了 ES6 和 ES7 的 Polyfill。

示例代码

下面是一个使用 Babel 和 Polyfill 的示例代码：

// index.js
import 'core-js/stable';
import 'regenerator-runtime/runtime';

const sum = (a, b) => a + b;
console.log(sum(1, 2));

使用 Babel 编译后的代码：

// javascriptcn.com 代码示例
// index.js
"use strict";

require("core-js/modules/es.function.arrow");
require("core-js/modules/es.array.concat");
require("core-js/modules/es.object.to-string");
require("core-js/modules/es.promise");
require("core-js/modules/es.promise.finally");
require("core-js/modules/es.string.iterator");
require("core-js/modules/web.dom-collections.iterator");
require("regenerator-runtime/runtime");

var sum = function sum(a, b) {
  return a + b;
};

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

总结

使用 Babel 编译 ES6 代码并同时支持 Polyfill，可以让我们的代码在各种浏览器中运行，提高了代码的兼容性和可靠性。在配置 Babel 和 Polyfill 时，需要根据项目的实际情况进行调整，以达到最佳的效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506c89d95b1f8cacd27538e