Attempting to use Vite in library mode to pile 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)

Attempting to use Vite in library mode to pile 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)

• javascript
• internet-explorer
• babeljs
• template-literals
• vite

Share Improve this question Follow edited Oct 15, 2021 at 20:12 WillD asked Oct 15, 2021 at 19:51 WillDWillD 6,60299 gold badges3535 silver badges6868 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 plaining 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./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./evanw/esbuild/issues/1010#issuement-803865232
           * We choose to run Babel on the output files after esbuild.
           *
           * @vitejs/plugin-legacy does not support library mode:
           *  https://github./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: [...]
    }
  }
})

You can use @vitejs/plugin-legacy to support IE 11 in Vite.

I test with a simple Vite project with vanilla JavaScript and add the test file code like yours. I first run npm i -D @vitejs/plugin-legacy, then use a vite.config.js file like below:

import legacy from '@vitejs/plugin-legacy'

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

Then I run npm run build, the generated js file in dist folder is like below which supports IE 11:

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