JavaScript 版本问题：ES6 语法在旧浏览器的兼容

为什么 ES6 兼容性问题值得重视

ECMAScript 2015（ES6）在 2015 年正式发布，带来了箭头函数、类、模块系统、Promise、解构赋值等革命性特性。这些特性极大提升了开发效率，但浏览器支持情况参差不齐。Internet Explorer 11、部分移动端内置浏览器、以及各种古老的企业内网系统，仍然是 ES6 语法的「禁地」。

如果你的应用需要覆盖这些用户群体，直接使用 ES6 语法将导致页面崩溃、功能失效。本文将提供一套完整的解决方案，帮助你在享受现代语法便利的同时，确保代码在任何浏览器中都能稳定运行。

第一步：诊断目标浏览器的支持范围

在动手解决兼容性问题之前，必须先明确你需要支持哪些浏览器。不同项目的受众群体不同，解决方案也应有所侧重。

列出必须支持的浏览器版本。可以通过以下维度进行评估：用户访问日志中浏览器的占比分布、企业内部系统的标准化浏览器版本、移动端 App 内嵌 WebView 的内核版本。确定最低支持的浏览器版本后，访问 Can I Use 官网，逐一查询 ES6 各特性的支持情况。

建立兼容性需求矩阵。将核心 ES6 特性与目标浏览器进行交叉对照：

这张表格清晰地揭示了一个事实：IE 11 对 ES6 的支持几乎为零，而国内大量政务系统、金融企业仍然以 IE 11 为默认浏览器。这意味着单纯的「渐进增强」策略是不够的，必须引入编译转换工具。

第二步：选择并配置 Babel 转译工具

Babel 是目前最成熟、最普及的 ES6→ES5 转译工具。它将现代 JavaScript 语法转换为旧浏览器能够理解的等效代码，确保运行时行为一致。

初始化项目并安装 Babel 核心依赖。在项目根目录执行以下命令：

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

创建 Babel 配置文件。在项目根目录新建 babel.config.json 文件，这是 Babel 的核心配置入口：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "ie >= 11"
          ]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

这段配置的含义如下：targets.browsers 定义了目标浏览器范围，这里指定兼容所有浏览器的最近两个版本以及 IE 11 及以上；useBuiltIns: "usage" 表示按需引入 polyfill，不会一次性注入全部代码；corejs: 3 指定使用 core-js 第三版作为 polyfill 数据源。

测试转译效果。创建一段 ES6 代码进行验证：

// src/app.js
const greet = (name) => {
  return `Hello, ${name}!`;
};

class User {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    return greet(this.name);
  }
}

const user = new User('World');
console.log(user.sayHello());
```

执行转译命令：

```bash
npx babel src/app.js --out-file dist/app.js
```

查看生成的 `dist/app.js`，箭头函数会被转换为普通函数，类会被转换为基于原型的构造函数，所有新语法都被还原为 ES5 语法。

---

## 第三步：集成自动化构建流程

手工调用 Babel 命令效率低下，实际项目中必须将其集成到自动化构建工具中。这里介绍两种主流方案。

### 方案一：使用 Webpack + Babel-Loader

**安装 Webpack 相关依赖**：

```bash
npm install --save-dev webpack webpack-cli babel-loader
```

**配置 `webpack.config.js`**：

```javascript
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['ie >= 11'],
                },
                useBuiltIns: 'usage',
                corejs: 3,
              }],
            ],
          },
        },
      },
    ],
  },
};

执行 npx webpack 后，所有源文件会被自动转译并打包到 dist/bundle.js 中。

方案二：使用 Vite（推荐用于新项目）

Vite 是下一代前端构建工具，原生支持 ES 模块，对 ES6 语法的处理更加智能。

初始化 Vite 项目并安装兼容依赖：

npm create vite@my-project -- --template vanilla
cd my-project
npm install
npm install --save-dev @vitejs/plugin-legacy

配置 vite.config.js：

import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'ie >= 11'],
    }),
  ],
});

执行 npm run build，Vite 会自动生成两套代码：现代浏览器使用的原生 ES 模块，以及旧浏览器需要的兼容版代码。

第四步：处理特殊的 polyfill 需求

Babel 能够转译语法层面的变化，但某些 ES6 特性是语法无法覆盖的，必须通过 polyfill 实现。这些特性包括 Promise、Map、Set、Array.from、Object.assign 等静态方法和原型方法。

按需引入 polyfill。在入口文件顶部添加：

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

core-js 提供了 ES6 至 ES2022 的完整 polyfill 实现，regenerator-runtime 则用于支持 async/await 语法（如果你的 Babel 配置未包含 transform-regenerator）。

使用动态导入做代码分割。如果项目体积较大，可以将 polyfill 与业务代码分离：

// 主入口文件
async function bootstrap() {
  if (!('Promise' in window)) {
    await import('core-js/stable');
  }
  // 加载主业务逻辑
  const { main } = await import('./main.js');
  main();
}

bootstrap();

第五步：验证兼容效果

配置完成后，必须在目标浏览器环境中进行真实测试，确保所有功能正常工作。

在本地模拟旧浏览器环境。可以使用 Chrome DevTools 的「覆盖率」功能查看代码执行情况：打开开发者工具（F12），进入「Coverage」面板，重新加载页面，查看 ES5 代码的覆盖率和使用情况。

使用虚拟机进行真实测试。虚拟机软件（如 VirtualBox）可以安装 Windows 7 + IE 11 的镜像，在真实环境中验证页面功能和交互逻辑。如果发现某些 API 仍然报错，检查是否遗漏了对应的 polyfill。

自动化测试覆盖。在 CI/CD 流程中集成浏览器测试工具（如 Playwright 或 Puppeteer），指定在 Headless IE 或旧版 Chrome 中运行测试用例，确保每次代码变更都不会破坏兼容性。

第六步：建立长期维护机制

浏览器兼容性不是一次性工作，需要随着项目演进持续维护。

锁定依赖版本。Babel 相关依赖的版本升级可能改变转译行为，使用 package-lock.json 或 yarn.lock 锁定依赖版本，避免自动升级导致的意外兼容问题。

定期审查目标浏览器。随着用户浏览器分布的变化，可以逐步提高最低支持版本，减少 polyfill 体积。当 IE 11 用户占比低于某个阈值（如 1%）时，可以考虑停止支持，简化构建配置。

监控线上错误。部署后通过 Sentry、LogRocket 等错误监控工具收集线上崩溃信息，及时发现兼容性问题并修复。

关键配置速查表

以下是不同构建工具的最小配置示例，供快速参考：

Webpack 项目：

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env', {
            targets: 'ie >= 11',
            useBuiltIns: 'usage',
            corejs: 3,
          }]],
        },
      }],
    }],
  },
};

Vite 项目：

// vite.config.js
import legacy from '@vitejs/plugin-legacy';
export default { plugins: [legacy({ targets: ['ie >= 11'] })] };

入口文件：

// index.js 或 main.js
import 'core-js/stable';

完成上述步骤后，你的 ES6 代码将在所有目标浏览器中稳定运行，无需在「现代语法」与「浏览器兼容」之间做出妥协。