import

Sintaxis

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

defaultExport

Nombre que se referir al export por defecto del mdulo.

module-name

El mdulo desde el que importar. Normalmente es una ruta relativa o absoluta al archivo .js que contiene el mdulo, excluyendo la extensin .js. Algunos empaquetadores pueden permitir o requerir el uso de la extensin; comprueba tu entorno. Slo se permiten Strings con comillas simples o dobles.

name

Nombre del objeto del mdulo que se utilizar como nombre de dominio al hacer referencia a los imports.

export, exportN

Nombre de los exports a ser importados.

alias, aliasN

Nombre del objeto que recibir la propiedad importada.

Descripcin

El parmetro name es el nombre del objeto que recibir los miembros exportados. El parmetro member especifica miembros individuales, mientras el parmetro name importa todos ellos. name puede tambin ser una funcin si el mdulo exporta un slo parmetro por defecto en lugar de una serie de miembros. Abajo hay ejemplos que explican la sintaxis.

Importa el contenido de todo un mdulo

Esto inserta myModule en el mbito actual, que contiene todos los elementos exportados en el archivo ubicado en /modules/my-module.js.

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

Aqu, para acceder a los miembros exportados habr que usar el alias del mdulo ("myModule" en este caso) como namespace. Por ejemplo, si el mdulo importado arriba incluye un miembro exportado llamado doAllTheAmazingThings(), habra que invocarlo de la siguiente manera:

myModule.doAllTheAmazingThings();

Importa un solo miembro de un mdulo

Dado un objeto o valor llamado myExport que ha sido exportado del mdulo my-module ya sea implcitamente (porque todo el mdulo ha sido exportado) o explcitamente (usando la sentencia export ), esto inserta myExport en el mbito actual.

import { myExport } from "/modules/my-module.js";

Importa multiples miembros de un mdulo

Esto inserta foo y bar en el mbito actual.

import { foo, bar } from "my-module.js";

Importa un miembro con un alias ms conveniente

Se puede renombrar un miembro exportado cuando se importa. Por ejemplo, esto inserta shortName en el mbito actual.

import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";

Renombra multiples miembros durante la importacin

Importa mltiples miembros exportados de un mdulo con un alias conveniente.

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short,
} from "/modules/my-module.js";

Importa un mdulo entero para efectos secundarios solamente

Importa un mdulo entero para efectos secundarios solamente, sin importar ningun elemento. Esto ejecuta el cdigo global del mdulo, pero no importa ningn valor.

import "/modules/my-module.js";

Importacin de elementos por defecto

Es posible tener una exportacin por defecto (tanto si se trata de un objeto, funcin, clase, etc.). Recprocamente, es posible usa la instruccin import para importar esos elementos establecidos como por defecto.

La versin ms sencilla de importar un elemento por defecto es:

import myDefault from "/modules/my-module.js";

Tambin es posible usar la sintaxis por defecto con lo que hemos visto anteriormente (importacin de espacios de nombres o importaciones con nombre. En esos casos, la importacin por defecto se deber realizar en primer lugar. Por ejemplo:

import myDefault, * as myModule from "/modules/my-module.js";
// myModule used as a namespace

o

import myDefault, { foo, bar } from "/modules/my-module.js";
// specific, named imports

Ejemplos

Importar un archivo secundario para asistir en un procesamiento de una peticin JSON AJAX.

El mdulo: file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    callback(this.responseText);
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, (data) => callback(JSON.parse(data)));
}

El programa principal: main.js

import { getUsefulContents } from "/modules/file.js";

getUsefulContents("http://www.example.com", (data) => {
  doSomethingUseful(data);
});

Especificaciones

Compatibilidad con navegadores

Ver tambin

• export
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"