Hemos visto que los módulos en JavaScript permite organizar y reutilizar el código en proyectos, y que existen que existen dos sistemas principales de módulos:
- ES Modules (ESM), parte del estándar ECMAScript
- CommonJS (CSM), creado inicialmente para Node.js
Como decíamos, actualmente siempre hay que preferir módulos ESM, porque son el estándar de JavaScript para crear módulos.
Sin embargo, CommonJS sigue existiendo (y lo hará durante un tiempo) dada la popularidad que adquirieron gracias a Node.js
Ahora vamos a ver como usar cada uno de ellos, tanto en un navegador, como en un runtime como en Node.js.
| Plataforma | ES Modules (ESM) | CommonJS |
|---|---|---|
| Navegador | 🟢 Soportado nativamente | 🔴 No soportado |
| Node.js | 🟡 Soportado | 🟢 Soportado nativamente |
En el navegador
Usar Módulos ES
Los navegadores modernos soportan módulos ES directamente a través del atributo type="module" en la etiqueta <script>.
<!-- archivo: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Módulos en el navegador</title>
</head>
<body>
<script type="module">
import { sumar } from './matematicas.js';
console.log(sumar(2, 3)); // 5
</script>
</body>
</html>Usar CommonJS
Los navegadores no soportan CommonJS nativamente. Para usar módulos CommonJS, necesitas herramientas como Browserify o Webpack, (y muchas muchas otras) que convierten el código en un formato compatible con el navegador.
En Node.js
Usar ES Modules
Para usar ESM, necesitas agregar "type": "module" en tu archivo package.json.
{
"type": "module"
}Con esta configuración, puedes usar import y export en tus archivos.
// archivo: matematicas.js
export const sumar = (a, b) => a + b;
// archivo: app.js
import { sumar } from './matematicas.js';
console.log(sumar(4, 6)); // 10Usar CommonJS
Por defecto, Node.js utiliza módulos CommonJS. Simplemente hay que usar la sintaxis require y module.exports.
// archivo: matematicas.js
const sumar = (a, b) => a + b;
module.exports = { sumar };
// archivo: app.js
const { sumar } = require('./matematicas');
console.log(sumar(4, 6)); // 10