兼容旧版本浏览器：Vite Legacy插件的深度使用指南

随着JavaScript的快速发展，许多新的编程语法和特性正在被陆续标准化并在现代浏览器中得到支持。然而，任何一个项目都无法完全忽略旧版本浏览器的用户，因为他们很可能仍然占据了一部分市场份额。这就要求我们既需要遵循新的开发趋势，使用最新的语法和特性提升开发效率，又要考虑到老版本浏览器的兼容性问题。Vite的Legacy插件为我们提供了一种解决方案，它能够自动将我们的源代码转换为能在旧版本浏览器中运行的代码。

本篇文章将详细介绍如何使用Vite的Legacy插件，包括如何添加插件、如何设置目标浏览器、在何种场景下需要添加polyfills，以及如何避开常见的陷阱。

首先，我们需要在项目中安装Vite和Legacy插件。通过npm或者yarn全局或者局部安装Vite，安装Legacy插件的命令是npm install @vitejs/plugin-legacy或者yarn add @vitejs/plugin-legacy。

然后，我们需要在Vite的配置文件中添加Legacy插件：

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

export default defineConfig({
  plugins: [
    legacy()
  ]
})

这样，Vite就会自动将你的源代码转换为能在旧版本浏览器中运行的代码了。

接下来，我们需要根据项目需求来设置目标浏览器。比如，如果我们希望我们的项目能在iOS 10以上版本的Safari中运行，那么我们就需要将目标设定为iOS 10或更高版本：

legacy({
     targets: ['iOS >= 10']
}),  

在添加这样的配置后，Vite的Legacy插件将会转换那些不被iOS 10或以上版本Safari支持的Javascript新特性，让你的项目可以在这些版本的浏览器中运行。

然而，并不是所有的Javascript新特性都可以通过转换来在旧版浏览器中实现。有些特性可能需要添加polyfills才能在旧版浏览器中使用。例如，你如果在你的代码中使用了Promise或者Fetch，而这些功能在旧版Safari中并不被支持，那么你就需要添加对应的polyfill。你可以通过additionalLegacyPolyfills选项来添加这些polyfill：

legacy({
    targets: ['iOS >= 10'],
    additionalLegacyPolyfills: ['regenerator-runtime/runtime']
}),