import

Nota: Essa funcionalidade não está implementada nativamente em nenhum navegador no momento. Está implementada em muitos transpiladores, como o Traceur CompilerBabelRollup ou Webpack..

Sintaxe

import membroPadrao from "nome-do-modulo";
import * as 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 membroPadrao, { member [ , [...] ] } from "nome-do-modulo";
import membroPadrao, * as nome 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 defaults (Padrões)

É possível ter um export padrão (independente se é um objeto, uma função, uma classe, etc.). A instrução import pode ser usada para importar tais padrões.

A versão mais simplificada para importar diretamente um 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 declarada primeiro. Por instancia:

import meuPadrao, * as meuModulo from 'modulo';
// 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 entre 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.

Veja também

Etiquetas do documento e colaboradores

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