import

La sentencia import se usa para importar funciones que han sido exportadas desde un m贸dulo externo.

Por el momento, esta caracter铆stica s贸lo est谩 comenzando a ser implementada de forma nativa en los navegadores. Est谩 implementada en muchos transpiladores, tales como Typescript y Babel, y en empaquetadores como Rollup y Webpack.

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 m贸dulo.
module-name
El m贸dulo desde el que importar. Normalmente es una ruta relativa o absoluta al archivo .js que contiene el m贸dulo, excluyendo la extensi贸n .js. Algunos empaquetadores pueden permitir o requerir el uso de la extensi贸n; comprueba tu entorno. S贸lo se permiten Strings con comillas simples o dobles.
name
Nombre del objeto del m贸dulo 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.

Descripci贸n

El par谩metro name es el nombre del objeto que recibir谩 los miembros exportados. El par谩metro member especifica miembros individuales, mientras el par谩metro name importa todos ellos. name puede tambi茅n ser una funci贸n si el m贸dulo exporta un s贸lo par谩metro por defecto en lugar de una serie de miembros. Abajo hay ejemplos que explican la sintaxis.

Importa el contenido de todo un m贸dulo.

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 m贸dulo ("myModule" en este caso) como namespace. Por ejemplo, si el m贸dulo importado arriba incluye un miembre exportado llamado doAllTheAmazingThings(), habr铆a que invocarlo de la siguiente manera:

myModule.doAllTheAmazingThings();

Importa un solo miembro de un m贸dulo.

Dado un objeto o valor llamado myExport que ha sido exportado del m贸dulo my-module ya sea impl铆citamente (porque todo el m贸dulo ha sido exportado) o expl铆citamente (usando la sentencia export ), esto inserta myExport en el 谩mbito actual.

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

Importa multiples miembros de un m贸dulo.

Esto inserta foo y bar en el 谩mbito actual.

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

Importa un miembre con un alias mas 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 importaci贸n

Importa m煤ltiples miembros exportados de un m贸dulo con un alias conveniente.

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

Importa un m贸dulo entero para efectos secundarios s贸lamente

Importa un m贸dulo entero para efectos secundarios s贸lamente, sin importar ningun elemento. Esto ejecuta el c贸digo global del m贸dulo, pero no importa ning煤n valor.

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

Importaci贸n de elementos por defecto

Es posible tener una exportaci贸n por defecto (tanto si se trata de un objeto, funci贸n, clase, etc.). Rec铆procamente, es posible usa la instrucci贸n import para importar esos elementos establecidos como por defecto.

La versi贸n m谩s sencilla de importar un elemento por defecto es:

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

Tambi茅n es posible usar la sintaxis por defecto con lo que hemos visto anteriormente (importaci贸n de espacios de nombres o importaciones con nombre. En esos casos, la importaci贸n 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 petici贸n JSON AJAX.

El m贸dulo: 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

Especificaci贸n Estado Comentario
ECMAScript 2015 (6th Edition, ECMA-262)
La definici贸n de 'Imports' en esta especificaci贸n.
Standard Definici贸n inical
ECMAScript (ECMA-262)
La definici贸n de 'Imports' en esta especificaci贸n.
Living Standard  

Compatibilidad entre navegadores

BCD tables only load in the browser

Ver tambi茅n