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 Latest Draft (ECMA-262)
La definición de 'Imports' en esta especificación.
Draft  

Compatibilidad entre navegadores

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Soporte básicoChrome Soporte completo 61Edge Soporte completo 16
Soporte completo 16
Soporte completo 15
Deshabilitado
Deshabilitado From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Soporte completo 60
Soporte completo 60
Sin soporte 54 — 60
Deshabilitado
Deshabilitado From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 47Safari Soporte completo 10.1WebView Android Sin soporte NoChrome Android Soporte completo 61Edge Mobile Soporte completo SiFirefox Android Soporte completo 60
Soporte completo 60
Sin soporte 54 — 60
Deshabilitado
Deshabilitado From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 47Safari iOS Soporte completo 10.1Samsung Internet Android Sin soporte Nonodejs Soporte completo 8.5.0
Notas Deshabilitado
Soporte completo 8.5.0
Notas Deshabilitado
Notas files must have suffix .mjs, not .js
Deshabilitado From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Soporte completo 63Edge Sin soporte No
Notas
Sin soporte No
Notas
Notas See development status.
Firefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1342012.
IE Sin soporte NoOpera Soporte completo 50Safari Soporte completo 11.1WebView Android Soporte completo 63Chrome Android Soporte completo 63Edge Mobile Sin soporte NoFirefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1342012.
Opera Android Soporte completo 50Safari iOS Soporte completo 11.1Samsung Internet Android ? nodejs ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: AlePerez92, frank-orellana, feserafim, guumo, javiernunez, Siro_Diaz, jepumares
Última actualización por: AlePerez92,