Vite/Rollup搭配@rollup/plugin-babel设置ie>=11未移除模板反引号

问题根因 #

当前配置存在3个核心问题导致多行模板字面量未被正确转译：

• 未显式指定Vite构建目标为ES5，Vite默认输出ES6+语法
• 混合使用CommonJS和ESM模块语法导入插件，可能导致插件加载异常
• Babel未显式限定处理范围，且未强制开启模板字面量转译规则

修复步骤 #

1. 安装完整依赖
   执行以下命令安装所有必需的开发依赖：

npm install @babel/core @babel/preset-env @babel/plugin-transform-template-literals @rollup/plugin-babel -D

2. 修改 vite.config.js 配置
   替换为以下完整配置：

// vite.config.js
const path = require('path');
const { defineConfig } = require('vite');
const { babel } = require('@rollup/plugin-babel');

module.exports = defineConfig({
  esbuild: false,
  plugins: [
    babel({
      babelHelpers: 'bundled',
      extensions: ['.js'],
      include: path.resolve(__dirname, 'js-src/**'),
      exclude: 'node_modules/**',
      presets: [
        [
          '@babel/preset-env',
          {
            targets: { ie: '11' },
            loose: true
          }
        ]
      ],
      plugins: [
        ['@babel/plugin-transform-template-literals', { loose: true }]
      ]
    }),
  ],
  build: {
    target: 'es5',
    outDir: 'javascript',
    lib: {
      entry: path.resolve(__dirname, 'js-src/index.js'),
      name: 'MyLib',
      fileName: () => 'my-lib.js',
    },
  },
});

转译效果验证 #

重新执行构建后，多行模板字面量会被转换为IE11兼容的普通字符串拼接格式，原有的换行符会以\n的形式保留，输出代码可直接在IE11环境正常运行，运行效果和原ES6代码完全一致。

内容的提问来源于stack exchange，提问作者WillD