Babel 的角色：语法转换器 vs 运行时补丁（polyfill）

理解 Babel 的核心功能

Babel 是现代 JavaScript 开发中不可或缺的工具，它主要负责将 ES6+ 代码转换为向后兼容的版本，以便在旧版浏览器或环境中运行。但需要注意的是，Babel 的功能可以分为两个主要部分：语法转换和运行时补丁。

语法转换（Syntax Transformation）

语法转换是 Babel 的核心功能之一，它负责将 ES6+ 的新语法转换为等效的 ES5 语法。这类转换不需要添加额外的运行时代码，因为它们只是语法层面的变换。

箭头函数转换

// ES6 代码
const add = (a, b) => a + b;

// Babel 转换后
var add = function add(a, b) {
  return a + b;
};

Class 语法转换

// ES6 代码
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  getArea() {
    return this.height * this.width;
  }
}

// Babel 转换后
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Rectangle = function Rectangle(height, width) {
  _classCallCheck(this, Rectangle);
  
  this.height = height;
  this.width = width;
};

Rectangle.prototype.getArea = function getArea() {
  return this.height * this.width;
};

模板字符串转换

// ES6 代码
const greeting = `Hello, ${name}!`;

// Babel 转换后
var greeting = "Hello, ".concat(name, "!");

运行时补丁（Polyfill）

与语法转换不同，某些 ES6+ 特性涉及新的内置对象、方法或全局 API，这些无法通过简单的语法转换来实现，需要在运行时提供相应的实现，这就是 polyfill 的作用。

Promise 的 Polyfill

// ES6 代码
const fetchData = () => {
  return new Promise((resolve, reject) => {
    // 异步操作
  });
};

// 在不支持 Promise 的环境中需要 polyfill
// 通常通过 core-js 或类似的库提供

Array 新方法的 Polyfill

// ES6 代码
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);

// 在旧环境中需要 polyfill
// Array.prototype.map 和 Array.prototype.filter 的实现

Map 和 Set 的 Polyfill

// ES6 代码
const map = new Map();
const set = new Set();

// 在不支持的环境中需要完整的 polyfill 实现

Babel 配置策略

在实际项目中，我们需要合理配置 Babel 来处理这两类不同的转换需求：

@babel/preset-env

@babel/preset-env 是一个智能预设，它可以根据目标环境自动确定需要转换的特性：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

useBuiltIns 选项

• false（默认）：不自动添加 polyfill
• usage：按需添加 polyfill，只引入用到的特性
• entry：在入口文件添加所有需要的 polyfill

Core.js 的作用

Core.js 是一个模块化的 JavaScript 标准库，它提供了 ES6+ 特性的 polyfill 实现。Babel 通常与 core-js 配合使用来处理运行时补丁需求。

// 引入 core-js 的 Promise 实现
import 'core-js/es/promise';

// 引入多个特性
import 'core-js/es/array/includes';
import 'core-js/es/string/pad-start';

总结

理解 Babel 的语法转换和运行时补丁的区别对于优化项目构建和兼容性非常重要：

1. 语法转换处理的是语言结构的变化，通过 AST 转换实现
2. 运行时补丁处理的是新增的 API，需要在运行时提供实现
3. 合理配置 Babel 和选择合适的 polyfill 策略可以平衡兼容性和包体积