Vite搭配Babel插件无法转译代码至ES2015的问题求助

问题分析 #

核心问题是@babel/preset-env未触发块级作用域转译（const/let转var），原因在于未明确指定目标兼容环境——默认情况下@babel/preset-env会根据当前运行环境判断需要转译的特性，可能不会启用transform-block-scoping插件；同时vite-plugin-babel的配置需要和Vite自身的构建目标配合。

方案一：修正现有vite-plugin-babel配置 #

修改Vite配置文件，给@babel/preset-env添加明确的目标环境配置，同时调整Vite的构建目标：

import { defineConfig } from "vite";
import babel from "vite-plugin-babel";

export default defineConfig({
  plugins: [
    babel({
      babelConfig: {
        babelrc: false,
        configFile: false,
        presets: [
          ["@babel/env", {
            targets: {
              browsers: "> 0.25%, not dead, IE 11" // 指定要兼容的浏览器范围，包含IE11会强制转译const/let
            },
            modules: false // 禁用Babel的模块转译，交给Vite处理，避免冲突
          }]
        ]
      },
    }),
  ],
  server: {
    host: "127.0.0.1",
  },
  build: {
    target: "es5" // 让Vite自身生成的基础代码也符合ES5标准
  }
});

关键说明： #

• targets必须明确指定兼容范围，比如包含IE11时，@babel/preset-env会自动启用块级作用域转译插件。
• modules: false保证Vite的模块处理逻辑不受Babel干扰。

方案二：使用Vite官方兼容插件（更推荐） #

Vite官方提供的@vitejs/plugin-legacy专门适配旧浏览器兼容场景，比单独用babel插件更贴合Vite构建流程：

1. 安装插件：

npm install -D @vitejs/plugin-legacy

2. 修改Vite配置：

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

export default defineConfig({
  plugins: [
    legacy({
      targets: ["IE 11", "> 0.25%, not dead"], // 指定兼容目标
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"] // 按需补充polyfill
    })
  ],
  server: {
    host: "127.0.0.1",
  },
  build: {
    target: "es5"
  }
});

优势： #

• 自动处理代码转译和polyfill注入，无需手动配置Babel细节。
• 生成现代浏览器/旧浏览器两份代码，自动通过nomodule区分加载，兼顾兼容性与性能。

验证转译结果 #

执行npm run build后，打开dist/assets下的JS文件，搜索const/let确认是否已转译为var；方案二会生成带-legacy后缀的旧浏览器适配代码。

内容的提问来源于stack exchange，提问作者M-Zoldak