vite/rollup和@rollup/plugin在设置为ie >= 11时不带模板文字回退。

Question

试图在库模式中使用Vite将ES6 .js文件编译成将在Internet 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 11安全的其他类型的字符串。不过，它只发生在多行模板文字字符串上。单行模板文字将被更改为带有"字符的字符串。

寻找一种解决方案，强制babel移除这些反勾字符，并将它们转换为受支持的字符串类型(保留换行符)。

Answer 1

我找到罪魁祸首。这不是巴别，而是以斯建设。

在Babel完成了将所有内容正确转换(我检查过了，它确实如此)之后，优化就会启动，Esbuild (默认情况下)会“优化”那些新到达的分行符"\n“，返回到更细的多行字符串中。

我看到您试图用esbuild = false禁用Esbuild，但可能这不是正确的配置选项"back那时“(在Nov21中)，以阻止Esbuild破坏您的结果。

为了阻止Esbuild使用换行符返回多行字符串，您有两个选项。

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

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

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

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

// vite.config.js
import { defineConfig } from 'vite'
import { getBabelOutputPlugin } from '@rollup/plugin-babel'

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

Answer 2

您可以在Vite中使用@vitejs/plugin-遗赠支持IE11。

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

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)}}}));