Convertidor de ES6 a ES5
Pega JavaScript moderno y obtén código ES5 que funciona en navegadores antiguos como Internet Explorer 11. El convertidor ejecuta el preset-env de Babel directamente en tu navegador, así que tu código nunca se sube, y enumera los helpers que añadió y los objetos integrados que aún necesitan polyfills.
Última actualización:
Cómo usar Convertidor de ES6 a ES5
- Pega tu JavaScript moderno en el cuadro de la izquierda o pulsa Abrir archivo .js. Hay un ejemplo cargado para que veas la salida enseguida.
- Elige los navegadores destino. "Internet Explorer 11" produce ES5 puro; los destinos más nuevos conservan la sintaxis que esos navegadores ya admiten.
- Elige un formato de módulos si tu código usa import o export: CommonJS para Node y bundlers, AMD o UMD para cargadores de scripts.
- Pulsa Convertir a ES5 (o deja activado Convertir mientras escribo). Corrige cualquier error de sintaxis que se muestre en rojo.
- Copia o descarga la salida ES5 y añade los polyfills indicados bajo el resultado si necesitas esos objetos integrados en navegadores antiguos.
Qué cambia al convertir ES6+ a ES5
| Función moderna | Añadida en | Ejemplo | Equivalente ES5 generado |
|---|---|---|---|
| let / const | ES2015 | const x = 1; | var x = 1; (renombrada si hace falta para mantener el ámbito de bloque) |
| Funciones flecha | ES2015 | a => a * 2 | function (a) { return a * 2; }, con this capturado en _this |
| Plantillas literales | ES2015 | `Hi ${name}` | "Hi ".concat(name) |
| Clases | ES2015 | class A extends B {} | Funciones constructoras más los helpers _classCallCheck, _createClass, _inherits |
| Desestructuración y valores por defecto | ES2015 | function f({ a = 1 } = {}) | Variables temporales y comprobaciones de arguments |
| Spread / rest | ES2015 / ES2018 | [...a, b] | [].concat(_toConsumableArray(a), [b]) |
| for…of | ES2015 | for (const x of list) | Helper de iterador con vía rápida para arrays |
| Operador de exponente | ES2016 | 2 ** 10 | Math.pow(2, 10) |
| async / await | ES2017 | await fetchData() | Máquina de estados de generador mediante el helper regenerator (necesita Promise) |
| Encadenamiento opcional / nullish | ES2020 | a?.b ?? c | Comprobaciones explícitas === null || === void 0 |
| Campos de clase y #private | ES2022 | static count = 0; #id; | Llamadas a _defineProperty y un WeakMap por cada campo privado |
Sintaxis frente a objetos integrados: qué sigue necesitando polyfills
Un transpilador como Babel solo reescribe la sintaxis. Todo lo que sea un objeto global o un método de un prototipo integrado debe existir en tiempo de ejecución, así que en navegadores solo ES5 cargas antes un polyfill. El panel de resultados los señala automáticamente. Los más comunes:
- ES2015: Promise, Map, Set, WeakMap, Symbol, Array.from, Array.prototype.find, Object.assign, String.prototype.startsWith e includes (ES2016).
- ES2017 y posteriores: Object.entries y values, padStart y padEnd, Array.prototype.flat, Object.fromEntries, Promise.allSettled, String.prototype.replaceAll, Array.prototype.at.
- Sin polyfill posible: Proxy, BigInt, WeakRef y el lookbehind de regex necesitan un motor moderno; reescribe ese código si debe funcionar en navegadores antiguos.
Consejos
- Elige Conservar import / export solo cuando un bundler vaya a procesar la salida; si no, elige CommonJS, AMD o UMD para que no quede sintaxis de módulos.
- El código que usa
importoexportse trata como módulo y recibe"use strict"; los scripts simples se dejan en modo no estricto tal como están escritos. - Pulsa Ctrl + Intro (Cmd + Intro en Mac) en la entrada para convertir al instante; Tab inserta dos espacios.
- Para comprobar rápidamente que el resultado se analiza como ES5, pégalo en el Verificador de sintaxis de JavaScript.
Preguntas frecuentes
¿Qué diferencia hay entre ES6 y ES5?
ES5 (ECMAScript 5, 2009) es la versión de JavaScript que admiten todos los navegadores, incluido Internet Explorer 9 a 11. ES6, oficialmente ECMAScript 2015, añadió let y const, funciones flecha, clases, plantillas literales, desestructuración, parámetros por defecto y rest, spread, for…of, módulos, Promise, Map, Set y Symbol. Las ediciones anuales posteriores (de ES2016 en adelante) añadieron funciones como async/await, encadenamiento opcional y campos de clase.
¿Convertir a ES5 hace que mi código funcione en Internet Explorer 11?
Convierte la sintaxis, que es la parte que IE 11 no puede analizar. Los objetos y métodos integrados introducidos después de ES5, como Promise, Map, Set, Symbol, Array.from, Object.assign o String.prototype.includes, no los añade el transpilador. La herramienta enumera los que detecta para que puedas incluir polyfills, por ejemplo de core-js, antes de tu script.
¿Qué es el modo loose?
El modo loose indica a Babel que genere código más simple, pequeño y rápido que no sigue la especificación en todos los casos extremos. Por ejemplo, las clases asignan los métodos directamente al prototipo (por lo que se vuelven enumerables) y el spread usa concat. Suele estar bien para código de aplicaciones, pero puede cambiar el comportamiento en casos raros, así que déjalo desactivado si no estás seguro.
¿Por qué la salida empieza con funciones como _classCallCheck o _createClass?
Son helpers de Babel: pequeñas funciones que implementan en ES5 funciones como clases, spread, desestructuración o funciones async. Babel incrusta cada helper una vez al principio del archivo. En proyectos grandes normalmente se compartirían con @babel/plugin-transform-runtime, pero para un solo archivo convertido, incrustarlos lo mantiene autónomo.
¿Cómo se convierte async/await a ES5?
Babel reescribe las funciones async como funciones generadoras y luego convierte los generadores en una máquina de estados usando un helper incrustado del runtime regenerator. El resultado sigue dependiendo de Promise en tiempo de ejecución, así que los navegadores antiguos necesitan un polyfill de Promise. La alternativa de TypeScript usa sus propios helpers __awaiter y __generator de la misma forma.
¿Se sube mi código a algún sitio?
No. El compilador Babel se descarga una vez desde una CDN pública y se ejecuta por completo en tu navegador. El código que pegas y los archivos que abres se procesan localmente y nunca se envían a un servidor.
¿Puede convertir BigInt o Proxy a ES5?
No. BigInt y Proxy necesitan soporte del motor y no se pueden expresar en ES5 ni cubrir del todo con polyfills, así que Babel los deja como están. La herramienta te avisa cuando los detecta. El lookbehind de expresiones regulares y WeakRef tienen la misma limitación.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →