Search code examples
javascriptinternet-explorerbabeljstemplate-literalsvite

vite/rollup with @rollup/plugin-babel does not strip template literal backticks when set to ie >= 11

Attempting to use Vite in library mode to compile an ES6 .js files down to a bundled ES5 .js file that will run in Internet Explorer 11. In my actual app there are several files that use ESM import/export, however I have verified that I can reproduce the problem with a single, simplified example file. Which I will include below.

Here is my configuration:

//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',
    },
  },
});

Test File:

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

Resulting output file:

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

Notice how the transpiled code does down-shift to ES5 (see var instead of const) but it does not remove the template literal backticks and convert them to some other type of string that is safe for Internet Explorer 11. It only happens on multi-line template literal strings though. A single-line template literal will get changed to a string with " characters.

Looking for a solution to force babel to remove these backtick characters and convert them a supported type of string (that preserves the linebreaks as well)

Solution

  • I found the culprit. It is not Babel but Esbuild.

    After Babel has done a great job on transpiling everything properly (I checked, it does) the optimization kicks in and Esbuild (by default) "optimizes" those newly arrived linebreaks "\n" back into much slimmer (char wise) multiline strings.

    I see that you tried to disable Esbuild with esbuild = false but maybe this wasn't the correct config option "back then" (in Nov21) to stop Esbuild from messing up your results.

    In order to stop Esbuild from re-transpiling strings with line breaks back multiline strings you have two options

    • disable minification: build.minify = false
    • or set build.target = 'ie11'

    Once build.target is set to ie11 the build process will start complaining that Esbuild is not ready to transpile quite some parts of your code to IE11 specification. I assume that this is because Esbuild runs before the plugins are ran and later again for the final optimization.

    So using @vite/babel is not an option anymore, the new Babel-way goes via @rollup/plugin-babel.

    The following is my working vite.config.js or at least the important parts to it:

    // 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: [...]
    }
  }
})