import

Este artigo necessita de uma revisão editorial. Como posso ajudar.

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";

Importa múltiplos membros de um módulo com apelido mais conveniente.

import {nomeDeMembroDeModuloMuitoGrande as nomePequeno, 
outroNomeDeMembroDeModuloMuitoGrande as outroNomePequeno} from "modulo.js";

Importando Padrões

É possível ter padrão para exportar (se é um objeto, uma função, uma classe, etc..). Reciprocamente, é possível usar a instrução import para importar tal padrão.

A versão mais simples importa diretamente o padrão:

import meuPadrao from "modulo.js";

É possivel também usar a sintaxe padrão como visto acima(nome de importaçao ou importação nomeada ), Nestes casos, a importação padrão terá que ser declarado primeiro. Por instancia:

import meuPadrao, * as meuModulo from "mudulo";
// meuPadrao usado com um nome de importação

ou

import meuPadrao, {foo, bar} from "modulo";
//Específico, importação nomeada

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.

Olhe também

Etiquetas do documento e colaboradores

 Colaboradores desta página: PauloNevesF, tamorim
 Última atualização por: PauloNevesF,