JavaScript
Módulos

Sintaxis

• importar defaultMember desde 'modulo';
• importar {memberA, memberB, ...} desde 'módulo';
• importar * como módulo desde 'módulo';
• importe {miembroA como, miembroB, ...} desde 'módulo';
• importar defaultMember, * como módulo desde 'módulo';
• importa defaultMember, {moduleA, ...} desde 'module';
• importar 'módulo';

Observaciones

Exportaciones por defecto

Además de las importaciones con nombre, puede proporcionar una exportación predeterminada.

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

Puede utilizar una sintaxis simplificada para importar la exportación predeterminada.

import circleArea from './circle';
console.log(circleArea(4));

Tenga en cuenta que una exportación predeterminada es implícitamente equivalente a una exportación nombrada con el nombre default , y el enlace importado ( circleArea arriba) es simplemente un alias. El módulo anterior se puede escribir como

import { default as circleArea } from './circle';
console.log(circleArea(4));

Solo puede tener una exportación predeterminada por módulo. El nombre de la exportación por defecto se puede omitir.

// named export: must have a name
export const PI = 3.14;

// default export: name is not required
export default function (radius) {  
    return PI * radius * radius;
}

Importación con efectos secundarios.

A veces, tiene un módulo que solo desea importar, por lo que se ejecuta su código de nivel superior. Esto es útil para polyfills, otros globales o configuración que solo se ejecuta una vez cuando se importa el módulo.

Dado un archivo llamado test.js :

console.log('Initializing...')

Puedes usarlo así:

import './test'

Este ejemplo imprimirá Initializing... en la consola.

Definiendo un modulo

En ECMAScript 6, cuando se usa la sintaxis del módulo ( import / export ), cada archivo se convierte en su propio módulo con un espacio de nombres privado. Las funciones y variables de nivel superior no contaminan el espacio de nombres global. Para exponer funciones, clases y variables para que otros módulos importen, puede usar la palabra clave de export .

// not exported
function somethingPrivate() {
    console.log('TOP SECRET')
}


export const PI = 3.14;

export function doSomething() {
    console.log('Hello from a module!')
}

function doSomethingElse(){ 
    console.log("Something else")
}

export {doSomethingElse}

export class MyClass {
    test() {}
}

Nota: los archivos JavaScript de ES5 cargados a través de etiquetas <script> seguirán siendo los mismos cuando no se use import / export .

Solo los valores que se exportan explícitamente estarán disponibles fuera del módulo. Todo lo demás puede considerarse privado o inaccesible.

La importación de este módulo daría lugar (asumiendo que el bloque de código anterior está en my-module.js ):

import * as myModule from './my-module.js';

myModule.PI;                 // 3.14
myModule.doSomething();      // 'Hello from a module!'
myModule.doSomethingElse();  // 'Something else'
new myModule.MyClass();      // an instance of MyClass
myModule.somethingPrivate(); // This would fail since somethingPrivate was not exported

Importando miembros nombrados desde otro módulo

Dado que el módulo de la sección Definición de un módulo existe en el archivo test.js , puede importar desde ese módulo y usar sus miembros exportados:

import {doSomething, MyClass, PI} from './test'

doSomething()

const mine = new MyClass()
mine.test()

console.log(PI)

El método somethingPrivate() no se exportó desde el módulo de test , por lo que al intentar importarlo fallará:

import {somethingPrivate} from './test'

somethingPrivate()

Importando un módulo completo

Además de importar miembros nombrados desde un módulo o la exportación predeterminada de un módulo, también puede importar todos los miembros a un enlace de espacio de nombres.

import * as test from './test'

test.doSomething()

Todos los miembros exportados ahora están disponibles en la variable de test . Los miembros no exportados no están disponibles, al igual que no están disponibles con las importaciones de miembros nombrados.

Nota: La ruta al módulo './test' se resuelve con el cargador y no está cubierta por la especificación ECMAScript; esto podría ser una cadena para cualquier recurso (una ruta - relativa o absoluta - en un sistema de archivos, una URL para un recurso de red, o cualquier otro identificador de cadena).

Importando miembros nombrados con alias

A veces, puede encontrar miembros que tienen nombres de miembros realmente largos, como thisIsWayTooLongOfAName() . En este caso, puede importar el miembro y darle un nombre más corto para usar en su módulo actual:

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

Puede importar varios nombres de miembros largos como este:

import {thisIsWayTooLongOfAName as shortName, thisIsAnotherLongNameThatShouldNotBeUsed as otherName} from 'module'

shortName()
console.log(otherName)

Y, finalmente, puede mezclar alias de importación con la importación de miembro normal:

import {thisIsWayTooLongOfAName as shortName, PI} from 'module'

shortName()
console.log(PI)

Exportando múltiples miembros nombrados

const namedMember1 = ...
const namedMember2 = ...
const namedMember3 = ...

export { namedMember1, namedMember2, namedMember3 }