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

Question

尝试在库模式下使用 Vite 将 ES6 .js 文件编译为捆绑的 ES5 .js 文件，该文件将在 Internet Explorer 11 中运行。在我的实际应用程序中，有几个文件使用 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。

我使用 vanilla JavaScript 使用简单的 Vite 项目进行测试，并添加像您这样的测试文件代码。我首先运行 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)}}}));