ESM y CommonJS, en paralelo, con un clic
Abriste un proyecto Node antiguo y el archivo usa `require` y `module.exports`. O al contrario: un tutorial te pega `import`/`export` y tu base de código sigue corriendo en CommonJS puro. El mismo JavaScript, dos dialectos: cualquier desarrollador acaba teniendo que traducir entre ellos tarde o temprano.
Este conversor hace justo eso. Pega un archivo a la izquierda, elige una dirección (ESM → CommonJS o CommonJS → ESM) y el panel derecho muestra el mismo código en el otro formato. Maneja las ocho formas que te encuentras de verdad en código real: imports por defecto, imports con nombre, imports de namespace, imports con efectos secundarios, exports por defecto, exports con const, exports por lotes `export { a, b }` y `require('x')` simples.
Donde los dos formatos no encajan limpio (`require` dinámico, `__dirname` en ESM, exports condicionales, top-level `await`), un panel amarillo de advertencias te dice exactamente qué arreglar a mano. Sin subir nada, sin instalar nada, sin configurar Babel: la conversión se ejecuta en tu navegador en cuanto dejas de teclear.
Cómo se usa
- Elige una dirección arriba: ESM → CommonJS si tu origen usa `import` / `export`, CommonJS → ESM si usa `require` / `module.exports`.
- Pega tu código en el panel izquierdo. Por defecto se carga un archivo de muestra para que veas qué pinta tiene la salida antes de reemplazarla.
- El panel derecho muestra el código convertido al instante (auto-conversión activada). Desactívala si quieres editar un archivo grande primero y luego pulsar Convertir.
- Copia el resultado con el botón de la esquina superior derecha del panel de salida. Pégalo en tu editor y listo.
- Si aparece un panel amarillo de advertencias bajo los paneles, léelo: son líneas que el conversor no pudo reescribir limpio (`require` dinámico, `__dirname`, top-level `await`, exports mezclados). El panel señala la línea y explica qué hacer.
- Pulsa Intercambiar lados para volver a pasar la salida convertida por la otra dirección. Útil cuando quieres comprobar que tu archivo funciona en ambos.
- Usa Cargar muestra para poner un ejemplo realista de la dirección actual; útil cuando olvidas qué forma mapea a qué.
Cuándo te resulta útil
Siete situaciones donde cambiar entre ESM y CommonJS te llevaría media hora de edición a mano:
- Migrar un proyecto Node viejo a ESM. Tu equipo ha puesto `"type": "module"` en `package.json` y ahora cada archivo con `require` se rompe. Pega cada uno, obtén la versión ESM y vuelve a pegar. Una migración de 50 archivos baja de un día a una hora.
- Copiar un snippet de tutorial en un proyecto CommonJS. El post del blog usa la sintaxis moderna `import x from 'pkg'`; tu código sigue en Node 14 / Jest 27 con CJS puro. Un pegado, un clic y el snippet encaja con el estilo de tu proyecto.
- Compartir una respuesta de código que funcione para todos. Estás publicando en Stack Overflow o en un hilo de Slack y no sabes qué formato usa quien lo lea. Convierte tu snippet al contrario y pega los dos con una línea indicando cuál es cuál.
- Crear un paquete dual. Publicas una librería que distribuye tanto build ESM como CommonJS. Escríbela una vez en ESM, conviértela a CJS para el build `.cjs`, revisa las advertencias y entrega ambas. Ahorra una configuración de Rollup para paquetes pequeños de un solo archivo.
- Aterrizar en una base de código legada. La base de código a la que has llegado usa `module.exports`. Tú piensas en `import`. Pega cada archivo según lo vayas aprendiendo, lee la versión ESM para construir un modelo mental y luego vuelve al código real.
- Refactor rápido antes de una code review. Un revisor te pide "usa ESM en todo". Pasa cada archivo afectado por el conversor, arregla las advertencias y manda la PR. La parte aburrida y mecánica te lleva 5 minutos en lugar de 50.
- Enseñar la diferencia entre los dos. Muestra un archivo a la izquierda y el equivalente a la derecha. Las ocho formas comunes se alinean una al lado de la otra: más fácil que diapositivas para la primera semana de un junior.