vite创建的react项目如何兼容低版本安卓，低版本安卓不支持es6语法

Vite 是一个现代化的前端构建工具，默认情况下，它会生成基于 ES6+ 的代码。这对于大多数现代浏览器来说是没有问题的，但对于一些较旧版本的安卓浏览器可能会遇到兼容性问题。

为了使 Vite 创建的 React 项目在低版本的安卓设备上也能正常运行，我们需要确保最终的构建产物是兼容旧版浏览器的。这主要涉及使用 Babel 将 ES6+ 代码转换为更旧版本的 JavaScript，并添加必要的 Polyfill。

以下是如何通过 Vite 配置来兼容低版本安卓的步骤：

1. 安装必要的依赖

首先，你需要安装 @vitejs/plugin-legacy 插件和 Babel 相关依赖。

npm install @vitejs/plugin-legacy --save-dev

2. 配置 Vite

在 vite.config.js 中配置 @vitejs/plugin-legacy 插件。这将确保构建后的代码包含必要的 Polyfill 和降级的语法。

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

export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ['defaults', 'not IE 11', 'last 2 versions', '> 1%', 'Android >= 4.4'],
    }),
  ],
});

3. 构建项目

使用 Vite 进行构建：

npm run build

Vite 会根据配置生成兼容性的构建文件，确保在低版本的安卓浏览器中也可以正常运行。

4. 确保包含 Polyfill

即使使用了 @vitejs/plugin-legacy，有时你可能仍然需要手动添加一些 Polyfill，特别是对于一些非常旧的浏览器。你可以在项目的入口文件中（如 src/main.jsx）添加以下代码：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

完整示例

假设你已经用 Vite 创建了一个 React 项目，这里是一个完整的配置示例：

vite.config.js

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

export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ['defaults', 'not IE 11', 'last 2 versions', '> 1%', 'Android >= 4.4'],
    }),
  ],
});

src/main.jsx

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

package.json scripts 部分

确保你的 package.json 中包含以下脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

总结

通过上述步骤配置 Vite 和 Babel，可以使 React 项目兼容低版本的安卓浏览器。这主要包括使用 @vitejs/plugin-legacy 插件进行降级处理和确保必要的 Polyfill，以支持较旧版本的 JavaScript 特性。构建完成后，生成的代码应该可以在低版本安卓设备上正常运行。