Cargador de módulos en JavaScript

1. Módulo en JavaScript
2. Cargador de módulos en JavaScript

Este artículo aprenderá qué es un cargador de módulos en JavaScript y cómo usar un cargador de módulos para cargar módulos JavaScript en el archivo JavaScript principal por una instancia con un ejemplo.

Módulo en JavaScript

Las múltiples declaraciones de código utilizadas para resumir los detalles de implementación y ejecutar tareas específicas se conocen como módulo. También se puede reutilizar y podemos evitar escribir código similar repetidamente.

Podemos cargar y usar nuestro módulo en otra fuente de código. Podemos usar el módulo para transponer dependencias fácilmente para administrarlas.

Patrón básico del módulo:

Podemos crear un módulo con el patrón, como se muestra a continuación.

// Expose module as a global variable

var MyModule = function() {
  // Inner logic of the module

  function helloWorld() {
    console.log('Hello world');  // will print "Hello world" in log
  }

  // Expose API

  return {
    helloWorld: helloWorld
  }
}

Ahora, podemos crear una instancia de nuestro módulo, como se muestra a continuación.

var module_instance = new MyModule();

Ahora, podemos acceder a su API pública.

module_instance.helloWorld();

Cargador de módulos en JavaScript

Para interpretar y cargar un módulo ya escrito en un formato de módulo específico, usamos cargadores de módulos que se ejecutarán en el tiempo de ejecución del código fuente. El cargador de módulos se carga en los navegadores.

Necesitamos definir el archivo principal para que cargue el cargador de módulos. El cargador de módulos realiza la interpretación y descarga del archivo principal.

Hay algunos ejemplos de cargadores de módulos en JavaScript.

• RequireJs
• SystemJs

RequireJs

RequireJs es una biblioteca compatible con los estándares AMD (Definición de módulo asíncrono). Como se muestra a continuación, tenemos que descargar y cargar RequireJs en nuestro documento HTML.

<script src="scripts/require.js"></script>

Antes o después de cargar el script require.js, se puede configurar RequireJs. Necesitamos describir una variedad de nombres requeridos y almacenar la configuración.

SistemaJs

En JavaScript, SystemJs es un cargador de módulos universal. En angular para carga de módulos, se usa inmensamente.

Si necesitamos una biblioteca jQuery en nuestro archivo main.js, podemos iniciar nuestro archivo main.js con la palabra clave importar, y cargará automáticamente los módulos de la biblioteca jQuery. Usando SystemJs, podemos cargar módulos JavaScript separados en nuestro archivo principal de JavaScript, como se muestra a continuación.

System.Import('main.js');