@vitejs/plugin-legacy 为你的 Vite 项目提供对旧版浏览器的支持
@vitejs/plugin-legacy 是 Vite 生态中的一个插件，它用于为 Vite 项目提供对旧浏览器的支持。通过该插件，你可以创建两个构建版本：现代版本和遗留版本，以确保现代浏览器能够获得最好的性能，同时还能支持旧版浏览器。
以下是如何在 Vite 项目中使用 @vitejs/plugin-legacy 的示例代码：
首先，你需要安装这个插件：
npm install @vitejs/plugin-legacy --save-dev然后，在你的 Vite 配置文件中引入并配置该插件：
// vite.config.js
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'], // 指定要支持的浏览器的范围
}),
],
});在上述配置中，targets 选项指定了要为哪些浏览器提供支持。你可以根据需要调整这个选项。
使用该插件后，Vite 会生成两套 Chunk 文件：一套现代的 JavaScript 文件（无 transpile）和一套为遗留浏览器转换过的 JavaScript 文件（通过 babel-preset-env 或者其他转换器）。
为了在 HTML 中加载这两套文件，你可以使用如下的条件注释：
<!DOCTYPE html>
<html>
<head>
<script type="module" src="/src/main.js"></script>
<!-- 现代浏览器 -->
<script type="module" src="/src/main.legacy.js"></script>
<!-- 为了兼容不支持模块的浏览器 -->
<script nomodule src="/src/main.js"></script>
<!-- 遗留浏览器 -->
</head>
<body>
<div id="app"></div>
</body>
</html>在这个例子中，现代浏览器会加载 .js 文件作为模块，而遗留浏览器则会加载不支持模块的 .legacy.js 文件。这样，你就可以同时支持现代和遗留浏览器，提升了应用的兼容性。
评论已关闭