Un manual prctico sobre los sistemas de mdulos de JavaScript

Hoy te dar una introduccin prctica sobre los sistemas de mdulos que usamos cuando construimos bibliotecas en JavaScript. A medida que una aplicacin web o biblioteca crece y se agregan ms funciones, la modularizacin del cdigo mejora la legibilidad y el mantenimiento. Esta gua rpida le dar una visin incisiva de las opciones disponibles para crear y consumir mdulos en JavaScript.

Si alguna vez se ha preguntado cules son los pros y los contras de AMD, ESM o CommonJS, esta gua le brindar la informacin que necesita para elegir con confianza entre todas las opciones.

Una historia de mdulos de JavaScript

Sin funciones nativas integradas para espacios de nombres y mdulos en las primeras versiones del lenguaje JavaScript, se han introducido diferentes formatos de mdulo a lo largo de los aos para llenar este vaco.

Los ms notables, que le mostrar cmo usar en su cdigo JavaScript a continuacin, son:

• Expresin de funcin inmediatamente invocada (IIFE)
• CommonJS (CJS)
• Definicin de mdulo asncrono (AMD)
• Definicin de mdulo universal (UMD)
• Mdulos ECMAScript (ESM)

La seleccin de un sistema de mdulos es importante al desarrollar una biblioteca de JavaScript. Para los autores de bibliotecas, la eleccin del sistema de mdulos para su biblioteca afecta la adopcin por parte del usuario y la facilidad de uso. Querr estar familiarizado con todas las posibilidades.

1. Expresin de funcin inmediatamente invocada (IIFE) - Immediately Invoked Function Expression

Una de las primeras formas de exponer bibliotecas en el navegador web, las expresiones de funcin invocadas inmediatamente (IIFE) son funciones annimas que se ejecutan inmediatamente despus de ser definidas.

(function () {  // Module's Implementation Code})();

Un patrn de diseo comn que aprovecha los IIFE es el patrn Singleton, que crea una nica instancia de objeto y cdigo de espacios de nombres. Este objeto sirve como un nico punto de acceso a un grupo especfico de funciones. Para ver ejemplos del mundo real, no busque ms all del objeto Math o la biblioteca jQuery.

Pros

Escribir mdulos de esta manera es conveniente y compatible con navegadores ms antiguos. De hecho, puede concatenar y agrupar de forma segura varios archivos que contienen IIFE sin preocuparse por las colisiones de nomenclatura y alcance.

Contras

Sin embargo, los mdulos IIFE se cargan sincrnicamente, lo que significa que ordenar correctamente los archivos del mdulo es fundamental. De lo contrario, la aplicacin se romper. Para proyectos grandes, los mdulos IIFE pueden ser difciles de administrar, especialmente si tiene muchas dependencias superpuestas y anidadas.

2. CommonJS (CJS)

El sistema de mdulos predeterminado de Node.js, CommonJS (CJS) usa la sintaxis require para importar mdulos y la sintaxismodule.exports y export para exportaciones predeterminadas y con nombre, respectivamente. Cada archivo representa un mdulo y todas las variables locales del mdulo son privadas, ya que Node.js envuelve el mdulo dentro de un contenedor de funciones.

Por ejemplo, este mdulo ..

const { PI, pow } = Math;function calculateArea(radius) {  return PI * pow(radius, 2);}module.exports = calculateArea;

Se convierte en ...

(function (  exports,  require,  module,  __filename,  __dirname) {  const { PI, pow } = Math;  function calculateArea(radius) {    return PI * pow(radius, 2);  }  module.exports = calculateArea;});

El mdulo no solo tiene sus variables dentro del mbito privado, sino que an tiene acceso global a, exports, require y module. __filename y __dirname tienen el mbito del mdulo y contienen el nombre del archivo y el nombre del directorio del mdulo, respectivamente.

La sintaxis requerida le permite importar mdulos incorporados de Node.js o mdulos de terceros instalados localmente

Pros

Las sentencias require de CommonJS son sncronas, lo que significa que los mdulos de CommonJS se cargan de forma sncrona. Siempre que sea el nico punto de entrada de la aplicacin, CommonJS automticamente sabe cmo ordenar los mdulos y manejar las dependencias circulares.

Contras

Al igual que los IIFE, CommonJS no se dise para generar paquetes de tamao pequeo. El tamao del paquete no se tuvo en cuenta en el diseo de CommonJS, ya que CommonJS se utiliza principalmente para desarrollar aplicaciones del lado del servidor. Para las aplicaciones del lado del cliente, el cdigo debe descargarse primero antes de ejecutarlo. La falta de agitacin de rboles convierte a CommonJS en un sistema de mdulos no ptimo para aplicaciones del lado del cliente.

3. Definicin de mdulo asncrono (AMD) - Asynchronous Module Definition

A diferencia de IIFE y CommonJS, Asynchronous Module Definition (AMD) carga mdulos y sus dependencias de forma asincrnica. Con origen en Dojo Toolkit, AMD est diseado para aplicaciones del lado del cliente y no requiere herramientas adicionales. De hecho, todo lo que necesita para ejecutar aplicaciones siguiendo el formato del mdulo AMD es la biblioteca RequireJS, un cargador de mdulos en el navegador. Eso es. Aqu hay un ejemplo simple que ejecuta una aplicacin React simple, estructurada con AMD, en el navegador.

<!-- index.html --><html lang="en">  <head>    <meta charset="UTF-8" />    <meta      http-equiv="X-UA-Compatible"      content="IE=edge"    />    <meta      name="viewport"      content="width=device-width,       initial-scale=1.0"    />    <title>React + AMD</title>  </head>  <body>    <div id="root"></div>    <script      type="text/javascript"      src="https://cdnjs.cloudflare.com       /ajax/libs/require.js/2.3.6       /require.min.js"    ></script>    <script      type="text/javascript"      src="main.js"    ></script>  </body></html>

A continuacin, este es el aspecto de JavaScript.

// main.jsrequirejs.config({  paths: {    react:      "https://unpkg.com/[email protected]      /dist/react",    "react-dom":      "https://unpkg.com      /[email protected]      /dist/react-dom",  },});requirejs(  ["react", "react-dom"],  (React, ReactDOM) => {    ReactDOM.render(      React.createElement(        "p",        {},        "Greetings!"      ),      document.getElementById("root")    );  });

Llamar a los mtodos requirejs o define registra la funcin de fbrica (la funcin annima pasada como segundo argumento a estos mtodos). AMD ejecuta esta funcin solo despus de que se hayan cargado y ejecutado todas las dependencias.

Pros

AMD permite definir varios mdulos dentro de un solo archivo y es compatible con navegadores ms antiguos.

Contras

AMD no es tan popular como los formatos de mdulos ms modernos, como los mdulos ECMAScript y la definicin de mdulo universal.

4. Definicin de mdulo universal (UMD) - Universal Module Definition

Para las bibliotecas que admiten entornos del lado del cliente y del lado del servidor, la Definicin de mdulo universal (UMD) ofrece una solucin unificada para hacer que los mdulos sean compatibles con muchos formatos de mdulo diferentes, como CommonJS y AMD.

Aqu est UMD en accin desde la biblioteca de desarrollo de React

(function (root, factory) {  if (    typeof define === "function" &&    define.amd  ) {    // Checks for RequireJS's    // `define` function.    // Register as an anonymous module.    define(["exports"], factory);  } else if (    typeof exports === "object" &&    typeof exports.nodeName !== "string"  ) {    // Checks for CommonJS.    // Calls the module factory    // immediately.    factory(exports);  } else {    // Register browser globals.    global = root || self;    factory((global.React = {}));  }})(this, function (exports) {  "use strict";  // Place React's module code here.  // ...});

• Si el IIFE detecta una funcin de definicin en el alcance global y una propiedad amd en la definicin, entonces ejecuta el mdulo como un mdulo AMD.
• Si el IIFE detecta un objeto de exportacin en el mbito global y una propiedad nodeName dentro de las exportaciones, entonces ejecuta el mdulo como un mdulo CommonJS.

Pros

Independientemente de si una aplicacin consume su biblioteca como un mdulo CommonJS, AMD o IIFE, UMD verifica condicionalmente el formato del mdulo que se est utilizando en tiempo de ejecucin y ejecuta cdigo especfico para el formato del mdulo detectado.

Contras

El cdigo de la plantilla UMD es un IIFE de aspecto intimidante y su uso es inicialmente un desafo. Sin embargo, UMD en s no es conceptualmente complicado.

5. Mdulos ECMAScript (ESM)

Los mdulos ECMAScript (ESM), el formato de mdulo introducido ms recientemente, es la forma estndar y oficial de manejar mdulos en JavaScript. Este formato de mdulo se usa comnmente en aplicaciones TypeScript.

Al igual que CommonJS, ESM proporciona varias formas de exportar cdigo: exportaciones predeterminadas o exportaciones con nombre.

// circle.jsexport function calculateArea() {  return Math.PI * Math.pow(radius, 2);}export function  calculateCircumference() {  return 2 * Math.PI * radius;}

La importacin de estas exportaciones nombradas por separado le dice al paquete de mdulos qu partes del mdulo importado deben incluirse en el cdigo generado. Se omiten todas las exportaciones con nombre no importadas. Esto reduce el tamao de la biblioteca, lo cual es til si su biblioteca se basa en algunos mtodos de una biblioteca de utilidades grande como lodash.

Ahora, en algn archivo en el mismo directorio que ./circle.js, necesitaramos el mdulo de la siguiente manera.

const {  calculateArea,  calculateCircumference,} = require("./circle");console.log(calculateArea(5));console.log(calculateCircumference(5));

Pros

Los paquetes de mdulos son compatibles con ESM y optimizan el cdigo mediante tcnicas como la agitacin de rboles (elimina el cdigo no utilizado del resultado final), que no son compatibles con otros formatos de mdulo. La carga y anlisis de mdulos es asincrnica, pero su ejecucin es sincrnica.

Contras

Este es el sistema de mdulos principales ms nuevo. Como tal, algunas bibliotecas an no lo han adoptado.

Creacin de tu propia biblioteca de React/JavaScript

Como puede imaginar, elegir el sistema de mdulos correcto se vuelve importante al crear tu propia biblioteca React. Personalmente con el uso hoy en dia de herramientas como babel.js podriamos trabajar con modulos de ECMAScript, pero yo soy partidario de usar CommonJS en Node y ECMAScript Modules (ESM) en el frontend.

@khriztianmoreno