Introducción a los módulos ES

• Introducción a los módulos ES
• La sintaxis de los módulos ES
• Otras opciones de importación / exportación
• CORS
• ¿Qué pasa con los navegadores que no admiten módulos?
• Conclusión

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.

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:

• Cosas para evitar en JavaScript (las partes malas)
• Diferidos y promesas en JavaScript (+ ejemplo de Ember.js)
• Cómo subir archivos al servidor usando JavaScript
• Estilo de codificación JavaScript
• Introducción a las matrices de JavaScript
• Introducción al lenguaje de programación JavaScript
• La guía completa de ECMAScript 2015-2019
• Comprender las promesas de JavaScript
• La estructura léxica de JavaScript
• Tipos de JavaScript
• Variables de JavaScript
• Una lista de ejemplos de ideas de aplicaciones web
• Introducción a la programación funcional con JavaScript
• JavaScript asincrónico moderno con Async y Await
• Ámbito y bucles de JavaScript
• La estructura de datos de JavaScript del mapa
• Establecer la estructura de datos de JavaScript
• Una guía para los literales de plantillas de JavaScript
• Hoja de ruta para aprender JavaScript
• Expresiones JavaScript
• Descubra los temporizadores de JavaScript
• Explicación de los eventos de JavaScript
• Bucles de JavaScript
• Escribe bucles de JavaScript usando mapa, filtrar, reducir y buscar
• El bucle de eventos de JavaScript
• Funciones de JavaScript
• El glosario de JavaScript
• Explicación de los cierres de JavaScript
• Un tutorial sobre las funciones de flecha de JavaScript
• Una guía para las expresiones regulares de JavaScript
• Cómo comprobar si una cadena contiene una subcadena en JavaScript
• Cómo eliminar un elemento de una matriz en JavaScript
• Cómo clonar en profundidad un objeto JavaScript
• Introduction to Unicode and UTF-8
• Unicode en JavaScript
• Cómo poner en mayúsculas la primera letra de una cadena en JavaScript
• Cómo formatear un número como valor de moneda en JavaScript
• Cómo convertir una cadena en un número en JavaScript
• esto en JavaScript
• Cómo obtener la marca de tiempo actual en JavaScript
• Modo estricto de JavaScript
• Expresiones de función invocadas inmediatamente (IIFE) de JavaScript
• Cómo redirigir a otra página web usando JavaScript
• Cómo eliminar una propiedad de un objeto JavaScript
• Cómo agregar un elemento a una matriz en JavaScript
• Cómo comprobar si una propiedad de un objeto JavaScript no está definida
• Introducción a los módulos ES
• Introducción a CommonJS
• Programación asincrónica de JavaScript y devoluciones de llamada
• Cómo reemplazar todas las apariciones de una cadena en JavaScript
• Una guía de referencia rápida para la sintaxis de JavaScript moderna
• Cómo recortar el cero a la izquierda en un número en JavaScript
• Cómo inspeccionar un objeto JavaScript
• La guía definitiva para las fechas de JavaScript
• Un tutorial de Moment.js
• Punto y coma en JavaScript
• Los operadores aritméticos de JavaScript
• El objeto matemático de JavaScript
• Genere cadenas únicas y aleatorias en JavaScript
• Cómo hacer que sus funciones de JavaScript duerman
• Herencia de prototipos de JavaScript
• Excepciones de JavaScript
• Cómo utilizar las clases de JavaScript
• El libro de cocina de JavaScript
• Cotizaciones en JavaScript
• Cómo validar una dirección de correo electrónico en JavaScript
• Cómo obtener las propiedades únicas de un conjunto de objetos en una matriz de JavaScript
• Cómo verificar si una cadena comienza con otra en JavaScript
• Cómo crear una cadena de varias líneas en JavaScript
• La guía ES6
• Cómo obtener la URL actual en JavaScript
• La guía ES2016
• Cómo inicializar una nueva matriz con valores en JavaScript
• La guía ES2017
• La guía ES2018
• Cómo usar Async y Await con Array.prototype.map ()
• Async vs código de sincronización
• Cómo generar un número aleatorio entre dos números en JavaScript
• Tutorial de la API de HTML Canvas
• Cómo obtener el índice de una iteración en un bucle for-of en JavaScript
• ¿Qué es una aplicación de página única?
• Una introducción a WebAssembly
• Introducción a JSON
• La guía JSONP
• Should you use or learn jQuery in 2020?
• Cómo ocultar un elemento DOM usando JavaScript simple
• Cómo fusionar dos objetos en JavaScript
• Cómo vaciar una matriz de JavaScript
• Cómo codificar una URL con JavaScript
• Cómo establecer valores de parámetros predeterminados en JavaScript
• Cómo ordenar una matriz de objetos por un valor de propiedad en JavaScript
• Cómo contar el número de propiedades en un objeto JavaScript
• llamar () y aplicar () en JavaScript
• Introducción a PeerJS, la biblioteca WebRTC
• Trabajar con objetos y matrices usando Rest y Spread
• Desestructurar objetos y matrices en JavaScript
• La guía definitiva para depurar JavaScript
• La guía de TypeScript
• Seleccionar dinámicamente un método de un objeto en JavaScript
• Pasar undefined a JavaScript Expresiones de función invocadas inmediatamente
• Idiomas poco tipados vs fuertemente tipados
• Cómo diseñar elementos DOM usando JavaScript
• Transmitir en JavaScript
• Tutorial de generadores de JavaScript
• El tamaño de la carpeta node_modules no es un problema. Es un privilegio
• Cómo resolver el error de identificador inesperado al importar módulos en JavaScript
• Cómo enumerar todos los métodos de un objeto en JavaScript
• El método String replace ()
• El método String search ()
• Cómo ejecuto pequeños fragmentos de JavaScript
• La guía ES2019
• El método String charAt ()
• El método String charCodeAt ()
• El método String codePointAt ()
• El método String concat ()
• El método String endsWith ()
• El método String incluye ()
• El método String indexOf ()
• El método String lastIndexOf ()
• El método String localeCompare ()
• El método String match ()
• El método String normalize ()
• El método String padEnd ()
• El método String padStart ()
• El método String repeat ()
• El método String slice ()
• El método String split ()
• El método String startsWith ()
• El método String substring ()
• El método String toLocaleLowerCase ()
• El método String toLocaleUpperCase ()
• El método String toLowerCase ()
• El método String toString ()
• El método String toUpperCase ()
• El método String trim ()
• El método String trimEnd ()
• El método String trimStart ()
• Memoización en JavaScript
• El método String valueOf ()
• Referencia de JavaScript: cadena
• El método Number isInteger ()
• El método Number isNaN ()
• El método Number isSafeInteger ()
• El método Number parseFloat ()
• El método Number parseInt ()
• El método Number toString ()
• El método Number valueOf ()
• El método Number toPrecision ()
• El método Number toExponential ()
• El método Number toLocaleString ()
• El método Number toFixed ()
• El método Number isFinite ()
• Referencia de JavaScript: Número
• Descriptores de propiedades de JavaScript
• El método de asignación de objetos ()
• El método Object create ()
• El método Object defineProperties ()
• El método Object defineProperty ()
• El método de las entradas de objeto ()
• El método Object freeze ()
• El método Object getOwnPropertyDescriptor ()
• El método Object getOwnPropertyDescriptors ()
• El método Object getOwnPropertyNames ()
• El método Object getOwnPropertySymbols ()
• El método Object getPrototypeOf ()
• El método Object es ()
• El método Object isExtensible ()
• El método Object isFrozen ()
• El método Object isSealed ()
• El método Object keys ()
• El método Object preventExtensions ()
• El método Object seal ()
• El método Object setPrototypeOf ()
• El método Object values ()
• El método Object hasOwnProperty ()
• El método Object isPrototypeOf ()
• El método Object propertyIsEnumerable ()
• El método Object toLocaleString ()
• El método Object toString ()
• El método Object valueOf ()
• Referencia de JavaScript: Objeto
• Operador de asignación de JavaScript
• Internacionalización de JavaScript
• Operador de tipo JavaScript
• Nuevo operador de JavaScript
• Operadores de comparación de JavaScript
• Reglas de precedencia de operadores de JavaScript
• Instancia de JavaScript del operador
• Declaraciones de JavaScript
• Alcance de JavaScript
• Conversiones de tipo JavaScript (transmisión)
• Operadores de igualdad de JavaScript
• El JavaScript if / else condicional
• El cambio condicional de JavaScript
• El operador de eliminación de JavaScript
• Parámetros de función de JavaScript
• El operador de difusión de JavaScript
• Valores de retorno de JavaScript
• Operadores lógicos de JavaScript
• Operador ternario de JavaScript
• Recurrencia de JavaScript
• Propiedades del objeto JavaScript
• Objetos de error de JavaScript
• El objeto global de JavaScript
• La función filter () de JavaScript
• La función map () de JavaScript
• La función reduce () de JavaScript
• El operador JavaScript "in"
• Operadores de JavaScript
• Cómo obtener el valor de una propiedad CSS en JavaScript
• Cómo agregar un detector de eventos a múltiples elementos en JavaScript
• Campos de clase privada de JavaScript
• Cómo ordenar una matriz por valor de fecha en JavaScript
• Campos de clase pública de JavaScript
• Símbolos JavaScript
• Cómo utilizar la biblioteca bcrypt de JavaScript
• Cómo cambiar el nombre de los campos cuando se usa la desestructuración de objetos
• Cómo verificar tipos en JavaScript sin usar TypeScript
• Cómo comprobar si una matriz de JavaScript contiene un valor específico
• ¡¡Qué hace el operador de doble negación !! hacer en JavaScript?
• ¿Qué operador de igualdad debería usarse en las comparaciones de JavaScript? == vs ===
• ¿Vale la pena aprender JavaScript?
• Cómo devolver el resultado de una función asincrónica en JavaScript
• Cómo comprobar si un objeto está vacío en JavaScript
• Cómo salir de un bucle for en JavaScript
• Cómo agregar un elemento a una matriz en un índice específico en JavaScript
• Por qué no debería modificar un prototipo de objeto JavaScript
• ¿Cuál es la diferencia entre usar let y var en JavaScript?
• Enlaces utilizados para activar funciones de JavaScript
• Cómo unir dos cadenas en JavaScript
• Cómo unir dos matrices en JavaScript
• ¿Cómo comprobar si un valor de JavaScript es una matriz?
• ¿Cómo obtener el último elemento de una matriz en JavaScript?
• Cómo enviar datos codificados en URL usando Axios
• Cómo obtener la fecha de mañana usando JavaScript
• Cómo obtener la fecha de ayer usando JavaScript
• Cómo obtener el nombre del mes a partir de una fecha de JavaScript
• Cómo comprobar si dos fechas son el mismo día en JavaScript
• Cómo verificar si una fecha se refiere a un día en el pasado en JavaScript
• Declaraciones etiquetadas JavaScript
• Cómo esperar a que se resuelvan 2 o más promesas en JavaScript
• Cómo obtener los días entre 2 fechas en JavaScript
• Cómo cargar un archivo usando Fetch
• Cómo formatear una fecha en JavaScript
• Cómo iterar sobre las propiedades del objeto en JavaScript
• Cómo calcular el número de días entre 2 fechas en JavaScript
• Cómo utilizar la espera de nivel superior en los módulos ES
• Importaciones dinámicas de JavaScript
• Encadenamiento opcional de JavaScript
• Cómo reemplazar el espacio en blanco dentro de una cadena en JavaScript
• Coalescencia nula de JavaScript
• Cómo aplanar una matriz en JavaScript
• Esta década en JavaScript
• Cómo enviar el encabezado de autorización usando Axios
• Lista de palabras clave y palabras reservadas en JavaScript
• Cómo convertir una matriz en una cadena en JavaScript
• Cómo eliminar todo el contenido de las carpetas node_modules
• Cómo eliminar duplicados de una matriz de JavaScript
• Let vs Const en JavaScript
• La misma llamada a la API POST en varias bibliotecas de JavaScript
• Cómo obtener los primeros n elementos en una matriz en JS
• Cómo dividir una matriz en varias partes iguales en JS
• Cómo ralentizar un bucle en JavaScript
• Cómo cargar una imagen en un lienzo HTML
• Cómo cortar una cadena en palabras en JavaScript
• Cómo dividir una matriz por la mitad en JavaScript
• Cómo escribir texto en un lienzo HTML
• Cómo eliminar el último carácter de una cadena en JavaScript
• Cómo eliminar el primer carácter de una cadena en JavaScript
• Cómo corregir el TypeError: no se puede asignar a la propiedad de solo lectura 'exportaciones' del objeto '# & lt; Object & gt;' error
• Cómo crear una ventana emergente de intención de salida
• Cómo comprobar si un elemento es descendiente de otro
• Cómo forzar las credenciales a cada solicitud de Axios
• Cómo resolver el error "no es una función" en JavaScript
• Gatsby, como cambiar el favicon
• Cargando un archivo JS externo usando Gatsby
• Cómo detectar el modo oscuro usando JavaScript
• Parcela, cómo solucionar el error `regeneratorRuntime is not defined`
• Cómo detectar si se está utilizando un bloqueador de anuncios con JavaScript
• Desestructuración de objetos con tipos en TypeScript
• El manual de Deno: una breve introducción a Deno 🦕
• Cómo obtener el último segmento de una ruta o URL usando JavaScript
• Cómo mezclar elementos en una matriz de JavaScript
• Cómo comprobar si existe una clave en un objeto JavaScript
• Generación de eventos y captura de eventos
• event.stopPropagation vs event.preventDefault () vs return false en eventos DOM
• Tipos primitivos vs objetos en JavaScript
• ¿Cómo puede saber qué tipo de valor es en JavaScript?
• Cómo devolver varios valores de una función en JavaScript
• Funciones de flecha frente a funciones regulares en JavaScript
• ¿De qué formas podemos acceder al valor de una propiedad de un objeto?
• ¿Cuál es la diferencia entre nulo e indefinido en JavaScript?
• ¿Cuál es la diferencia entre un método y una función?
• ¿Cuáles son las formas en que podemos salir de un bucle en JavaScript?
• El JavaScript for..of loop
• ¿Qué es la desestructuración de objetos en JavaScript?
• ¿Qué es izar en JavaScript?
• Cómo convertir las comas en puntos con JavaScript
• La importancia de la sincronización al trabajar con DOM
• Cómo invertir una matriz de JavaScript
• Cómo comprobar si un valor es un número en JavaScript
• Cómo aceptar parámetros ilimitados en una función de JavaScript
• Objetos de proxy de JavaScript
• Delegación de eventos en el navegador usando JavaScript vanilla
• La súper palabra clave de JavaScript
• Introducción a XState
• ¿Los valores se pasan por referencia o por valor en JavaScript?
• Eventos personalizados en JavaScript
• Errores personalizados en JavaScript
• Espacios de nombres en JavaScript
• Un curioso uso de las comas en JavaScript
• Encadenamiento de llamadas a métodos en JavaScript
• Cómo manejar el rechazo de promesas
• Cómo intercambiar dos elementos de matriz en JavaScript
• Cómo solucioné un error "cb.apply no es una función" mientras usaba Gitbook
• Cómo agregar un elemento al comienzo de una matriz en JavaScript
• Gatsby, corrige el error "no se puede encontrar el módulo gatsby-cli / lib / reporter"
• Cómo obtener el índice de un elemento en una matriz de JavaScript
• Cómo probar un objeto vacío en JavaScript
• Cómo desestructurar un objeto a variables existentes en JavaScript
• La estructura de datos de JavaScript Array
• La estructura de datos de JavaScript de pila
• Estructuras de datos de JavaScript: cola
• Estructuras de datos de JavaScript: Establecer
• Estructuras de datos JavaScript: diccionarios
• Estructuras de datos de JavaScript: listas vinculadas
• JavaScript, como exportar una función
• JavaScript, cómo exportar múltiples funciones
• JavaScript, como salir de una función
• JavaScript, cómo encontrar un carácter en una cadena
• JavaScript, cómo filtrar una matriz
• JavaScript, como extender una clase
• JavaScript, como encontrar duplicados en una matriz
• JavaScript, cómo reemplazar un elemento de una matriz
• Algoritmos JavaScript: búsqueda lineal
• Algoritmos JavaScript: búsqueda binaria
• Algoritmos de JavaScript: Orden de selección
• Algoritmos JavaScript: Quicksort
• Algoritmos de JavaScript: combinación de ordenación
• Algoritmos JavaScript: Clasificación de burbujas