当设置为 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

我找到了罪魁祸首。\n不是 Babel，而是 Esbuild。

\n

Babel 在正确地转译所有内容方面做得很好之后（我检查过，确实如此），优化开始，并且 Esbuild（默认情况下）“优化”那些新到达的换行符“\\n”回到更精简的（字符方面）多行字符串。

\n

我发现您尝试禁用 Esbuildesbuild = false但也许这不是“当时”（11 月 21 日）正确的配置选项，以阻止 Esbuild 弄乱您的结果。

\n

为了阻止 Esbuild 将带有换行符的字符串重新编译回多行字符串，您有两个选择

\n

\n
• 禁用缩小：build.minify = false
\n
• 或设置build.target = \'ie11\'
\n

\n

一旦build.target设置为ie11构建过程，就会开始抱怨 Esbuild 尚未准备好将代码的相当一部分转换为 IE11 规范。我认为这是因为 Esbuild 在插件运行之前运行，然后再次运行以进行最终优化。

\n

所以使用@vite/babel不再是一种选择，新的 Babel 方式通过@rollup/plugin-babel.

\n

以下是我的工作vite.config.js，或者至少是其中的重要部分：

\n

// vite.config.js\nimport { defineConfig } from \'vite\'\nimport { getBabelOutputPlugin } from \'@rollup/plugin-babel\'\n\nexport default defineConfig({\n  build: {\n    target: \'ie11\',\n    lib: {\n      /* your vite lib mode params */\n    },\n    rollupOptions: {\n      // make sure to externalize deps that shouldn\'t be bundled\n      // into your library\n      external: [],\n      output: {\n        plugins: [\n          /**\n           * Running Babel on the generated code:\n           *  https://github.com/rollup/plugins/blob/master/packages/babel/README.md#running-babel-on-the-generated-code\n           *\n           * Transforming ES6+ syntax to ES5 is not supported yet, there are two ways to do:\n           *  https://github.com/evanw/esbuild/issues/1010#issuecomment-803865232\n           * We choose to run Babel on the output files after esbuild.\n           *\n           * @vitejs/plugin-legacy does not support library mode:\n           *  https://github.com/vitejs/vite/issues/1639\n           */\n          getBabelOutputPlugin({\n            allowAllFormats: true,\n            presets: [\n              [\n                \'@babel/preset-env\',\n                {\n                  targets: \'> 0.25%, not dead, IE 11\',\n                  useBuiltIns: false, // Default\xef\xbc\x9afalse\n                  // // https://babeljs.io/docs/en/babel-preset-env#modules\n                  modules: false\n                },\n              ]\n            ]\n          }),\n        ]\n      },\n      plugins: [...]\n    }\n  }\n})\n\n

\n