Tradução em progresso.
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.
O conteúdo a seguir não reflete o estado final da especificação de módulos do ECMAScript 6. Para uma documentação mais precisa, veja ECMAScript 6 modules: the final syntax.
A declaração import é usada para importar funções que foram exportadas de um módulo externo, algum outro script, etc.
Nota: Essa funcionalidade não está implementada nativamente em nenhum navegador no momento. Está implementada em muitos transpiladores, como o Traceur Compiler e o ES6 Module Transpiler.
Sintaxe
import nome from "nome-do-modulo";
import { membro } from "nome-do-modulo";
import { membro as apelido } from "nome-do-modulo";
import { membro1, membro2 } from "nome-do-modulo";
import { membro1, membro2 as apelido2, [...] } from "nome-do-modulo";
import nome, { membro [, [...] ] } from "nome-do-modulo";
import "nome-do-modulo";
- nome
- Nome do objeto que receberá os valores importados.
membro, membroN- Nome dos membros exportados a serem importados.
apelido, apelidoN- Nome do objeto que receberá a propriedade importada.
nome-do-modulo- O nome do módulo que será importado. É o nome de um arquivo.
Descrição
O parâmetro nome é o nome do objeto que receberá os membros exportados.
O parâmetro membro especifica membros individuais, enquanto nome importa todos eles. nome também pode ser uma função se o módulo exportar um único parâmetro padrão ao invés de uma série de membros. Abaixo estão alguns exemplos para clarificar a sintaxe.
Importa todos os conteúdos de um módulo. Isso insere modulo no escopo atual, contendo todas as bindings exportadas.
import modulo from "modulo.js";
Importa um único membro de um módulo. Isso insere membro no escopo atual.
import {membro} from "modulo.js";
Importa múltiplos membros de um módulo. Isso insere foo e bar no escopo atual.
import {foo, bar} from "modulo.js";
Importa o conteúdo inteiro de um módulo, com alguns membros sendo explicitados também. Isso insere modulo, foo and bar no escopo atual. Note que foo e modulo.foo são os mesmos, assim como bar e modulo.bar.
import modulo, {foo, bar} from "modulo.js";
Importa um membro com um apelido mais conveniente. Isso insere nomePequeno no escopo atual.
import {nomeDeMembroDeModuloMuitoGrande as nomePequeno} from "modulo.js";
Importa um módulo inteiro apenas pelos efeitos colaterias, sem importar nenhuma binding.
import "modulo.js";
Exemplos
Importando um arquivo secundário para auxiliar no processamento de uma requisição AJAX que retorna um JSON.
// --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);
});
Especificações
| Especificação | Estado | Comentário |
|---|---|---|
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Imports' in that specification. |
Standard | Definição inicial. |
Compatibilidade com navegadores
| Funcionalidade | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Suporte básico | Não suportado [1] | Não suportado [2] | Não suportado | Não suportado | Não suportado |
| Funcionalidade | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Suporte básico | Não suportado | Não suportado | Não suportado | Não suportado | Não suportado | Não suportado |
[1] Suporte parcial através da flag de linha de comando: --harmony-modules. Veja esse bug no V8.
[2] Veja esse bug no Firefox.