在 vite 项目中注入 polyfill 的标准做法是利用 @vitejs/plugin-legacy 插件，它会自动处理针对旧版浏览器的代码转换和 polyfill 注入。配置该插件后，vite 会在构建时生成一个额外的 legacy.js 文件，并在 html 中通过 nomodule 脚本标签将其注入到支持 es module 的现代浏览器之外，从而实现对 ie11 等老旧环境的兼容。
如何配置 legacy 插件以启用自动注入
要启用自动注入，需要在 vite.config.js 中引入并注册 @vitejs/plugin-legacy。默认情况下，该插件会检测目标环境（如 IE11）所需的 Polyfill 并自动注入，无需手动管理依赖。配置完成后，Vite 的构建产物将包含两个版本的 JavaScript：一个是面向现代浏览器的原生 ES Module，另一个是面向旧版浏览器的带有 Polyfill 的打包文件。
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'], // 或者明确指定 'ie 11'
renderLegacyChunks: true,
polyfills: true, // 默认开启，显式声明更清晰
})
]
});
上述配置中，polyfills: true 是关键设置，它指示插件自动注入必要的 Polyfill。如果希望更精细地控制，可以设置为 false 并手动导入 core-js 或 babel-polyfill，但通常自动注入已足够覆盖大多数场景。构建后，检查生成的 HTML 文件，可以看到类似以下的脚本注入：
<script nomodule src="/assets/legacy-[hash].js"></script>
这个 nomodule 属性确保现代浏览器忽略该脚本，而旧版浏览器则执行它，从而实现渐进增强。
如何处理特定 Polyfill 的手动注入需求
当自动注入无法满足特定需求，例如需要注入全局变量或处理非标准 API 时，可以通过手动导入 core-js 或在入口文件中添加 Polyfill 脚本来实现。这种方式给予开发者对注入时机和内容的完全控制，适用于需要兼容极小众浏览器或特定库的场景。
// main.js
import 'core-js/stable';
import 'regenerator-runtime/runtime';
// 你的应用代码
import App from './App.vue';
new App().$mount('#app');
在手动注入模式下，建议在 vite.config.js 中将 polyfills 设置为 false，以避免插件重复注入。同时，确保 core-js 的版本与项目需求匹配，并使用 core-js/stable 以获得稳定的 API 集。对于异步迭代器等特定功能，可能需要额外导入 es.promise.finally 等模块。这种手动方式虽然增加了配置复杂度，但能确保 Polyfill 的精确性和可控性，特别适合对包体积敏感的项目。
legacy 插件在构建时如何处理输入条件与结果
在构建过程中，@vitejs/plugin-legacy 会根据配置的 targets 分析代码中的语法特性，并决定哪些部分需要转换为 ES5 兼容代码以及注入哪些 Polyfill。例如，如果代码使用了 async/await，插件会注入 regenerator-runtime；如果使用 Promise，则可能注入 core-js/modules/es.promise。最终结果是生成一个独立的、包含所有必要 Polyfill 的 legacy.js 文件，该文件在旧版浏览器中执行，确保应用正常运行。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
