Introducción a los módulos ES

ES Modules es el estándar ECMAScript para trabajar con módulos. Si bien Node.js ha estado utilizando el estándar CommonJS desde hace años, el navegador nunca tuvo un sistema de módulos, ya que todas las decisiones importantes, como un sistema de módulos, deben ser primero estandarizadas por ECMAScript y luego implementadas.

Introducción a los módulos ES

ES Modules es el estándar ECMAScript para trabajar con módulos.

MientrasNode.jsha estado utilizando el estándar CommonJS durante años, el navegador nunca tuvo un sistema de módulos, ya que todas las decisiones importantes, como un sistema de módulos, deben ser primero estandarizadas por ECMAScript y luego implementadas por el navegador.

Este proceso de estandarización se completó conES6y los navegadores comenzaron a implementar este estándar tratando de mantener todo bien alineado, funcionando todo de la misma manera, y ahora los módulos ES son compatibles con Chrome, Safari, Edge y Firefox (desde la versión 60).

Los módulos son geniales, porque te permiten encapsular todo tipo de funcionalidades y exponer esta funcionalidad a otros archivos JavaScript, como bibliotecas.

ES Modules Support

La sintaxis de los módulos ES

La sintaxis para importar un módulo es:

import package from 'module-name'

mientras CommonJS usa

const package = require('module-name')

Un módulo es un archivo JavaScript queexportacionesuno o más valores (objetos, funciones o variables), utilizando elexportpalabra clave. Por ejemplo, este módulo exporta una función que devuelve una cadena en mayúsculas:

mayúsculas.js

export default str => str.toUpperCase()

En este ejemplo, el módulo define un único,exportación predeterminada, por lo que puede ser una función anónima. De lo contrario, necesitaría un nombre para distinguirlo de otras exportaciones.

Ahora,cualquier otro módulo de JavaScriptpuede importar la funcionalidad ofrecida por uppercase.js importándolo.

Una página HTML puede agregar un módulo usando un<script>etiqueta con el especialtype="module"atributo:

<script type="module" src="index.js"></script>

Nota: la importación de este módulo se comporta como undefercarga de la secuencia de comandos. Vercargar JavaScript de forma eficiente con diferir y asincrónico

Es importante tener en cuenta que cualquier script cargado contype="module"está cargado enModo estricto.

En este ejemplo, eluppercase.jsmódulo define unexportación predeterminada, así que cuando lo importamos, podemos asignarle un nombre que prefiramos:

import toUpperCase from './uppercase.js'

y podemos usarlo:

toUpperCase('test') //'TEST'

También puede utilizar una ruta absoluta para la importación del módulo, para hacer referencia a los módulos definidos en otro dominio:

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

Esta también es una sintaxis de importación válida:

import { toUpperCase } from '/uppercase.js'
import { toUpperCase } from '../uppercase.js'

Esto no es:

import { toUpperCase } from 'uppercase.js'
import { toUpperCase } from 'utils/uppercase.js'

Es absoluto o tiene un./o/antes del nombre.

Otras opciones de importación / exportación

Vimos este ejemplo arriba:

export default str => str.toUpperCase()

Esto crea una exportación predeterminada. Sin embargo, en un archivo puede exportar más de una cosa, utilizando esta sintaxis:

const a = 1
const b = 2
const c = 3

export { a, b, c }

Otro módulo puede importar todas esas exportaciones usando

import * from 'module'

Puede importar solo algunas de esas exportaciones, utilizando elasignación de desestructuración:

import { a } from 'module'
import { a, b } from 'module'

Puede cambiar el nombre de cualquier importación, por conveniencia, utilizandoas:

import { a, b as two } from 'module'

Puede importar la exportación predeterminada y cualquier exportación no predeterminada por nombre, como en esta importación común de React:

import React, { Component } from 'react'

Puede ver un ejemplo de módulos ES aquí:https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html

CORS

Los módulos se obtienen usandoCORS. Esto significa que si hace referencia a scripts de otros dominios, deben tener un encabezado CORS válido que permita la carga entre sitios (comoAccess-Control-Allow-Origin: *)

¿Qué pasa con los navegadores que no admiten módulos?

Utilice una combinación detype="module"ynomodule:

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

Conclusión

Los módulos ES son una de las características más importantes introducidas en los navegadores modernos. Son parte de ES6 pero el camino para implementarlos ha sido largo.

¡Ahora podemos usarlos! Pero también debemos recordar que tener más de unos pocos módulos va a tener un impacto en el rendimiento de nuestras páginas, ya que es un paso más que debe realizar el navegador en tiempo de ejecución.

Webpackprobablemente seguirá siendo un gran jugador incluso si los módulos ES aterrizan en el navegador, pero tener una función de este tipo directamente integrada en el idioma es enorme para unificar cómo funcionan los módulos en el lado del cliente y también en Node.js.


Más tutoriales de js: