Vite构建JS库时，为何ES6未转译成ES5？

使用Vite构建JS库时，开发者常遇到ES6代码未转译为ES5的问题，导致兼容性错误。本文以一个案例分析了该问题：开发者使用Vite构建库，代码中使用了ES6语法，但打包后仍保留ES6代码，导致在旧版浏览器中报错。问题根源在于`vite.config.js`中`@babel/preset-env`插件的`targets`配置，其默认值(`> 0.25%, not dead`)导致Babel未进行ES6转ES5的处理。解决方法是修改`targets`配置，明确指定低版本浏览器（如IE 11）或使用更全面的浏览器兼容性列表，从而确保Babel正确转译ES6代码，提升库的兼容性。

Vite构建JS库：ES6代码未转译为ES5的解决方案

使用Vite构建JS库时，开发者经常遇到ES6代码未转译为ES5的问题，导致库在旧版浏览器环境中出现兼容性错误。本文分析一个案例，并提供解决方案。

案例中，开发者使用Vite构建JS库，使用了ES6的空值合并运算符（??），但打包后的代码仍包含ES6语法，导致报错。 其vite.config.js配置如下：

import { defineConfig } from "vite";
import babel from "@rollup/plugin-babel";

export default defineConfig({
  build: {
    lib: {
      entry: "./lib/main.js",
      name: "FastcodeTest",
      fileName: (format) => `fastcodeTest.${format}.js`,
      formats: ["es", "umd"],
    },
  },
  rollupOptions: {
    plugins: [
      babel({
        babelHelpers: "bundled",
        exclude: "node_modules/**",
        presets: [
          [
            "@babel/preset-env",
            {
              targets: {
                browsers: "> 0.25%, not dead", // 设定目标浏览器
              },
              useBuiltIns: "entry",
              corejs: 3,
            },
          ],
        ],
      }),
    ],
  },
});

问题根源在于targets: { browsers: "> 0.25%, not dead" }。此配置将目标浏览器设定为占有率大于0.25%且未停止维护的浏览器。现代浏览器原生支持ES6，因此Babel不会进行转译。

解决方案：

为了确保ES5兼容性，需要将targets配置修改为明确指定低版本浏览器，例如：

targets: {
  browsers: ["ie >= 11", "last 2 versions", "not dead"] // 或更具体的版本号
}

或者，为了更精细的控制，可以考虑使用一个更全面的浏览器兼容性列表，例如browserslist提供的配置。 此外，需排除其他可能导致错误的原因，例如node环境版本差异。 只有在排除了其他因素后，再调整Babel配置。 确保@babel/preset-env插件已正确安装。

通过修改targets配置，Babel将正确地将ES6代码转译为ES5，从而解决兼容性问题。 记住，选择合适的targets配置取决于你的目标浏览器支持范围。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~