Intento usar Vite en modo de biblioteca para compilar archivos .js de ES6 en un archivo .js de ES5 incluido que se ejecutará en Internet Explorer 11. En mi aplicación real, hay varios archivos que usan la importación/exportación de ESM, sin embargo, he verificado que Puedo reproducir el problema con un solo archivo de ejemplo simplificado. que incluiré a continuación.
Aquí está mi configuración:
//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', }, }, });Archivo de prueba:
const aWord = 'World'; const multiLineString = ` Hello ${aWord} `; console.log(multiLineString);Archivo de salida resultante:
(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict";var n=` Hello `.concat(aWord,` `);console.log(n)}); Observe cómo el código transpilado cambia hacia abajo a ES5 (vea var en lugar de const ), pero no elimina los acentos graves literales de la plantilla y los convierte en algún otro tipo de cadena que sea segura para Internet Explorer 11. Solo ocurre en múltiples cadenas literales de plantilla de línea sin embargo. Un literal de plantilla de una sola línea se cambiará a una cadena con " caracteres.
Buscando una solución para obligar a babel a eliminar estos caracteres de acento grave y convertirlos en un tipo de cadena compatible (que también conserva los saltos de línea)
Puede usar@vitejs/plugin-legacy para admitir IE 11 en Vite.
Pruebo con un proyecto Vite simple con JavaScript estándar y agrego el código del archivo de prueba como el suyo. Primero ejecuto npm i -D @vitejs/plugin-legacy , luego uso un archivo vite.config.js como el siguiente:
import legacy from '@vitejs/plugin-legacy' export default { plugins: [ legacy({ targets: ['ie >= 11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'] }) ] } Luego ejecuto npm run build , el archivo js generado en la carpeta dist es como el siguiente, que admite IE 11:
System.register([],(function(){"use strict";return{execute:function(){var e="\n Hello ".concat("World","\n");console.log(e)}}}));