当设置为 ie >= 11 时，带有 @rollup/plugin-babel 的 vite/rollup 不会去除模板文字反引号

Question

尝试在库模式下使用 Vite 将 ES6 .js文件编译为将在 Internet Explorer 11 中运行的捆绑 ES5 .js文件。在我的实际应用程序中有几个使用 ESM 导入/导出的文件，但是我已经验证我可以使用单个简化的示例文件重现该问题。 我将在下面包括。

这是我的配置：

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

module.exports = defineConfig({
  esbuild: false,
  plugins: [
    babel({
      babelHelpers: 'bundled',
      presets: [['@babel/preset-env', { targets: { browsers: 'defaults, ie >= 11' } }]],
    }),
  ],
  build: {
    outDir: 'javascript',
    lib: {
      entry: path.resolve(__dirname, 'js-src/index.js'),
      name: 'MyLib',
      fileName: (format) => 'my-lib.js',
    },
  },
});

测试文件：

const aWord = 'World';
const multiLineString = `
  Hello ${aWord}
`;
console.log(multiLineString);

结果输出文件：

(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict";var n=`
  Hello `.concat(aWord,`
`);console.log(n)});

请注意转译后的代码如何向下转换为 ES5（请参阅var而不是const ）但它不会删除模板文字反引号并将它们转换为对 Internet Explorer 11 安全的其他类型的字符串。它只发生在多行模板文字字符串。 单行模板文字将更改为带有"字符的字符串。

寻找强制 babel 删除这些反引号字符并将它们转换为支持的字符串类型的解决方案（也保留换行符）

Answer 1

您可以使用@vitejs/plugin-legacy在 Vite 中支持 IE 11。

我用一个简单的 Vite 项目和 vanilla JavaScript 进行测试，并添加像你一样的测试文件代码。 我首先运行npm i -D @vitejs/plugin-legacy ，然后使用如下所示的vite.config.js文件：

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
}

然后我运行npm run build ，在dist文件夹中生成的 js 文件如下所示，支持 IE 11：

System.register([],(function(){"use strict";return{execute:function(){var e="\n  Hello ".concat("World","\n");console.log(e)}}}));