JavaScript Polyfill 和转译器

Polyfill（填充工具）

Polyfill 是一段代码，用于在现代浏览器中实现浏览器原生不支持的功能。

特点：

• 运行时实现：在代码执行时提供缺失的功能
• 不转换语法：只是添加缺失的API实现
• 按需加载：可以只加载需要的polyfill

常见Polyfill：

• core-js：提供ES5、ES6+标准库的polyfill
• babel-polyfill（已弃用，现为core-js + regenerator-runtime）
• whatwg-fetch：为旧浏览器提供fetch API
• intersection-observer：提供IntersectionObserver API

使用示例：

// 如果浏览器不支持Array.prototype.includes
if (!Array.prototype.includes) {
  Array.prototype.includes = function(element) {
    // 实现代码
  };
}

转译器（Transpiler）

转译器是将新版本JavaScript代码转换为旧版本JavaScript代码的工具。

特点：

• 编译时转换：在代码运行前转换
• 语法转换：将新语法转换为旧语法
• 不添加运行时：通常不添加新API的实现（这部分需要polyfill）

常见转译器：

• Babel：最流行的JavaScript转译器
• TypeScript编译器：可以将TS和较新JS版本编译为旧JS
• SWC：用Rust编写的高速转译器

Babel示例：

// 输入 (ES6+)
const fn = (x) => x * 2;

// 输出 (ES5)
var fn = function(x) {
  return x * 2;
};

区别对比

现代开发中的使用

通常两者结合使用：

1. 使用转译器（如Babel）转换新语法
2. 使用polyfill（如core-js）添加缺失的API

现代Babel配置示例：

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', // 按需引入polyfill
        corejs: 3, // 指定core-js版本
        targets: "> 0.25%, not dead" // 浏览器兼容目标
      }
    ]
  ]
};

最佳实践

1. 按需引入：只polyfill和转译目标浏览器不支持的特性
2. 使用browserslist：统一管理浏览器兼容目标
3. 考虑性能：polyfill会增加包大小，转译会增加构建时间
4. 渐进增强：对现代浏览器提供更少的转译和polyfill