ecmascript怎么兼容旧浏览器

“ECMAScript 兼容旧浏览器”通常有两种理解：语法兼容（如 ES6+ 写法能在旧浏览器运行）和API 兼容（如 Promise、fetch 在旧浏览器中存在）。下面系统说明常见做法。

一、语法兼容（ES6+ → ES5）

旧浏览器（如 IE11）不认识 let、const、箭头函数、class、模板字符串等语法，必须用工具转译。

1. 使用 Babel（最主流）

npm install -D @babel/core @babel/preset-env

.babelrc / babel.config.js

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["ie >= 11"]
      }
    }]
  ]
}

配合构建工具：

• Webpack：babel-loader
• Vite：@vitejs/plugin-legacy
• Rollup：@rollup/plugin-babel

二、API 兼容（运行时补丁）

语法转译后，API 仍可能不存在，需要 polyfill。

常用 Polyfill

• core-js
• regenerator-runtime（async/await）
• whatwg-fetch（fetch）
• promise-polyfill

示例（入口文件最前面）：

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

Babel 自动按需引入（推荐）：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

三、构建工具层面的兼容

Webpack

module.exports = {
  entry: ['core-js', './src/index.js'],
  output: { filename: 'bundle.js' }
};

Vite（现代项目）

import legacy from '@vitejs/plugin-legacy'

plugins: [
  legacy({
    targets: ['ie >= 11']
  })
]

四、针对 IE 的特殊注意点

五、最低成本方案（不打包）

如果只是少量脚本：

<script src="https://cdn.jsdelivr.net/npm/core-js-bundle/min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime/runtime.js"></script>
<script src="your-es5.js"></script>

六、建议原则

✅ 新项目：Babel + core-js
✅ 现代浏览器为主：只转语法，不强制 polyfill
❌ 不建议继续深度兼容 IE（已淘汰）

如果你能说明：

• 使用的框架（Vue / React / 原生）
• 目标浏览器（IE？Android？）
• 是否使用构建工具

我可以给你更具体的配置示例。