Vite打包JS库ES6未转ES5，配置vite.config.js解决方法

在前端开发过程中，使用Vite打包JS库时，有时会遇到ES6代码未转换为ES5的问题。这在一些对兼容性要求较高的项目中，可能会导致部分旧浏览器无法正常运行代码。下面我们就来探讨如何通过配置vite.config.js来解决这一问题。

我们要明白为什么会出现ES6未转ES5的情况。Vite默认的目标环境是现代浏览器，它不会自动将ES6代码转换为ES5。这是为了追求更高的性能和更简洁的打包输出，但在兼容性方面可能就会出现问题。

要解决这个问题，关键在于对vite.config.js进行合理配置。打开项目中的vite.config.js文件，如果没有则创建一个。在文件中，我们需要使用@vitejs/plugin - legacy插件。这个插件可以帮助我们将ES6代码转换为ES5兼容的代码。

先安装@vitejs/plugin - legacy插件。在项目根目录下的命令行中执行：npm install @vitejs/plugin - legacy --save - dev。

安装完成后，在vite.config.js中引入该插件并进行配置：

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

export default defineConfig({
  plugins: [
    legacy({
      targets: ['ie >= 11'], // 这里指定需要兼容的目标浏览器，例如IE11
      additionalLegacyPolyfills: ['regenerator - runtime/runtime']
    })
  ]
});

在上述配置中，targets字段用于指定需要兼容的目标浏览器版本。additionalLegacyPolyfills字段用于引入额外的垫片，比如regenerator - runtime/runtime，它可以帮助处理一些ES6的异步操作在旧浏览器中的兼容性问题。

配置完成后，重新运行Vite打包命令。此时，打包后的JS库就会包含转换为ES5的代码，从而提高在旧浏览器中的兼容性。

通过正确配置vite.config.js，利用@vitejs/plugin - legacy插件，我们能够轻松解决Vite打包JS库时ES6未转ES5的问题，确保项目在各种浏览器环境中都能稳定运行，提升项目的兼容性和可用性。