import

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

La sentencia import se usa para importar funciones que han sido exportadas desde un módulo externo, otro script, etc.

Nota: Esta característica aún no es implementada en ningun navegador por el momento. Esto es implementado en muchos transpiladores, tales como Traceur Compiler y ES6 Module Transpiler.

Sintaxis

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name";
name
Nombre del objeto que recibirá los valores importados.
member, memberN
Nombre de los miembros exportados para ser importados.
alias, aliasN
Nombre del objeto que recibirá la propiedad importada.
module-name
El nombre del módulo para ser importado. Este es un nombre de archivo.

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.

import myModule from "my-module.js";

Importa un solo miembro de un módulo. Esto inserta myMember en el ámbito actual.

import {myMember} from "my-module.js";

Importa multiples miembros de un módulo. Esto inserta ambos foo y bar en el ámbito actual.

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

Importa el contenido de todo un módulo, que también ha sido nombrado explícitamente. Esto inserta myModulefoo, y bar en el ámbito actual. Nota que foo y myModule.foo es lo mismo, como también barmyModule.bar.

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

Importa un miembro con un alias más conveniente. Esto inserta shortName en el ámbito actual.

import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";

Importa un módulo entero para efectos secundarios sólamente, sin importar ningun elemento.

import "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 "my-module";

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 "my-module";
// myModule used as a namespace

o

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

Ejemplos

Importar un archivo secundario para asistir en un procesamiento de una petición JSON AJAX.

// --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)));
}

// --main.js--
import { getUsefulContents } from "file.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

Importar el módulo completo:

// --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)));
}

// --main.js--
import * as lib from "file.js";
lib.getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

 

Especificaciones

Especificación Estado Comentario
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Imports' in that specification.
Standard Definición inical
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Imports' in that specification.
Draft  

Compatibilidad entre navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support No support No support[1] No support Build 14342  No support No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 36.0 No support No support No support No support 36.0

[1] See bug 568953.

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: guumo, javiernunez, Siro_Diaz, jepumares
 Última actualización por: guumo,