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