兼容低版本浏览器

解决方案 |

一、需求背景

低版本浏览器（如 IE、旧版 Chrome/Firefox 等）对现代 JavaScript 特性（Promise、fetch、async/await、ES6+ 语法）和 CSS 新特性支持不足，需通过 Polyfill 补充特性、Babel 转译语法、PostCSS 补全前缀 实现兼容，结合 Vite 需用官方插件适配。

二、配置步骤

（一）Polyfill 与 Babel 转码（JavaScript 兼容）

1. 安装依赖

# 核心依赖
npm install --save-dev @vitejs/plugin-legacy @babel/preset-env
# Polyfill 按需引入（可选，若需手动补充）
npm install --save core-js regenerator-runtime

2. 配置 vite.config.js

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

export default defineConfig({
  plugins: [
    // 适配低版本浏览器
    legacy({
      targets: ["ie >= 11"], // 按需设置目标浏览器，如覆盖 IE 11 及以上
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 手动补充 Polyfill
    }),
  ],
  // 配置 Babel 转译规则
  build: {
    target: ["es2015"], // 转译为 ES2015 语法（覆盖更多旧浏览器）
  },
});

3. 配置 Babel（babel.config.json 或 .babelrc）

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage", // 按需引入 Polyfill（根据代码自动检测）
        "corejs": 3, // 指定 core-js 版本
        "targets": {
          "browsers": ["ie >= 11"] // 目标浏览器范围
        }
      }
    ]
  ]
}

（二）CSS 兼容性处理（PostCSS + Autoprefixer）

1. 安装依赖

npm install --save-dev postcss autoprefixer

2. 配置 PostCSS（postcss.config.js）

module.exports = {
  plugins: {
    // 自动补全 CSS 前缀
    autoprefixer: {
      overrideBrowserslist: ['ie >= 11', 'last 2 versions'] // 适配浏览器范围
    }
  }
}

3. 验证效果

编写现代 CSS 语法（如 display: grid），构建后检查输出文件，应自动补全 -ms-grid 等前缀。

（三）Vite 核心配置说明

配置项 作用 关键参数示例
@vitejs/plugin-legacy 生成兼容旧浏览器的产物（自动注入 Polyfill、转译语法） targets: ['ie >= 11']
build.target 指定 Vite 构建的语法目标（影响转译范围） 'es2015'（覆盖 ES5 基础特性）
@babel/preset-env 智能转译语法 + 按需 Polyfill useBuiltIns: 'usage'（按需加载）
autoprefixer 自动补全 CSS 前缀（适配不同浏览器内核） overrideBrowserslist（浏览器范围）

三、验证流程

  1. 本地构建：运行 npm run build，检查输出目录（如 dist），应生成 legacy 产物（适配旧浏览器）。
  2. 低版本浏览器测试：
    • 在 IE 11 或旧版浏览器打开构建后的页面。
    • 验证 Promise、async/await 等特性是否可用，CSS 新特性（如 flex）是否正常渲染。
  3. 调试工具：
    • 浏览器开发者工具 → Console：检查是否有语法报错。
    • Sources：查看转译后的代码，确认 ES6+ 语法已转为 ES5。

四、注意事项

  1. Polyfill 体积问题：
    • useBuiltIns: 'usage' 会按需加载，但仍可能增大包体积。可手动精简 targets 范围，减少不必要的 Polyfill。
  2. 动态语法兼容：
    • 若代码中使用 eval、new Function 等动态语法，Babel 无法转译，需手动处理。
  3. 浏览器版本覆盖：
    • 通过 browserslist 或 targets 精准控制适配范围，避免过度兼容导致包体积膨胀。