Vite旧版浏览器兼容插件指南: @vitejs/plugin-legacy

1. 插件安装:

@vitejs/plugin-legacy

这是一个 Vite 插件，用于为旧版本的浏览器提供兼容性支持。它的主要作用是将现代 JavaScript 代码（例如，ES6+、async/await、模块化等）转换成较旧版本浏览器（如 IE11 或早期版本的 Safari、Chrome）能够理解和运行的代码。该插件的工作原理基于 Babel 和 Polyfill。

官方：vite/packages/plugin-legacy at main · vitejs/vite · GitHub

注意：

- 1. @vitejs/plugin-legacy 对应vite版本要求

在项目中package.json中查看 vite版本，一般只需要找对应的大版本就行；【eg: vite ^7 ==> @vitejs/plugin-legacy ^7】

-2. 使用 @vitejs/plugin-legacy 打包后，包体积增大

插件会自动为旧版本浏览器引入一些 Polyfill（例如 core-js 和 regenerator-runtime）。这些 Polyfill 是为了确保现代 JavaScript 特性能够在旧浏览器中正常工作。由于 Polyfill 涉及到许多额外的库和代码，它会增加最终打包文件的体积。

- 查看可用版本

npm view @vitejs/plugin-legacy versions --json

- 下载对应的版本xx

npm i  @vitejs/plugin-legacy@xx -D

- 必须安装 Terser，因为 plugin-legacy 使用 Terser 进行缩小

npm add -D terser

2. 项目配置：

个人项目是vue, 其他项目也差不多；

#vite.config.ts

import { defineConfig } from 'vite';
import path from 'path';
import vue from '@vitejs/plugin-vue'
import { ***workInterfaces } from "os";

// 主要是这个插件，其他不是
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    vue(),
    legacy({
     // 设置需要兼容的目标浏览器版本
        targets: ['ie >= 11', '> 1%', 'last 2 versions'],
        // 为传统包提供 polyfills
        polyfills: ['es.promise.finally', 'es/map', 'es/set'],
        modernPolyfills: false,
        renderLegacyChunks: true,
        // 在使用协议本地运行项目时file:，这也很有帮助，因为加载现代代码块type="module"可能会触发 CORS 限制。
        // 为了避免此问题，只需设置renderModernChunks为false仅使用旧代码块即可
        renderModernChunks: false,
        // 如果你使用 `regenerator-runtime` (例如用了 async/await), 需要启用它
        additionalLegacyPolyfills: ['regenerator-runtime/runtime']
      })
    })
  ],
  // 别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: '', // 禁用默认的静态资源目录
    chunkSizeWarningLimit: 2000, // 设置警告阈值为 2000KB
    rollupOptions: {
      input: {
        // 多入口分包
        main: path.resolve(__dirname, "index.html"),
        // product: path.resolve(__dirname, "src/product.html"),
      },
      external: ["**/__tests__/**"],// 排除测试文件
      output: {
        entryFileNames: 'js/[name]-[hash].js',
        chunkFileNames: 'js/[name]-[hash].js',
        assetFileNames: (assetInfo: any) => {
          if (/\.(png|jpe?g|gif|svg)$/.test(assetInfo.name)) {
            return `images/[name]-[hash][extname]`;
          }
          if (/\.(woff2|ttf|woff)$/.test(assetInfo.name)) {
            return `font/[name]-[hash][extname]`;
          }
          if (/\.css$/.test(assetInfo.name)) {
            return `css/[name]-[hash].css`;
          }
          return `js[name]-[hash][extname]`;
        },
        manualChunks: (id) => { // 手动分块打包输出
          if (id.includes("node_modules")) {
            return "vendor"; // 这意味着所有来自 node_modules 目录的文件都将被打包到一个名为 "vendor" 的 chunk 中
          }
        },
      }
    },
    // 设置构建目标，legacy 插件会为传统浏览器生成相应的包
    target: 'es2015', // 或 ‘es5’
    minify: true, // 代码压缩

  },
})

3. 打包预览：

vite项目中 

#package.json

"scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },

使用这俩命令打包预览；npm run preview 默认起的是生产预览；主要是看其他样式结构和低版本浏览器能够正常访问；