Tradução em progresso.

A declaração estática import é usada para importar vínculos que são exportados por um outro módulo. Os módulos importados estão em strict mode,  declarado como tal ou não. A declaração import não pode ser usada em scripts embutidos, a menos que tal script tenha um type = "module".

Há também uma função dinâmica import(), que não requer scripts de type="module".

A compatibilidade com versões anteriores pode ser garantida usando o atributo nomodule na tag de script.

A importação dinâmica é útil em situações em que você deseja carregar um módulo condicionalmente ou sob demanda. A forma estática é preferível para carregar dependências iniciais e pode se beneficiar mais prontamente de ferramentas de análise estática e tree shaking.

Sintaxe

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 { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name"; 
import defaultExport, * as name from "module-name"; 
import "module-name"; var promise = import("module-name"); // This is a stage 3 proposal.
defaultExport
Nome que se referirá à exportação padrão do módulo.
module-name
O módulo para importar. Geralmente, esse é um nome de caminho relativo ou absoluto para o arquivo .js contendo esse módulo. Certos empacotadores podem permitir ou exigir o uso da extensão; verifique seu ambiente. Apenas aspas simples e aspas duplas são permitidas.
name
Nome do objeto do módulo que será usado como um tipo de espaço de nomes ao se referir às importações.
export, exportN
Nome das exportações a serem importadas.
alias, aliasN
Nomes que se referem às importações nomeadas.

Descrição

O parâmetro name é o nome do "objeto módulo", que será usado como um tipo de namespace para se referir às exportações. Os parâmetros de exportação especificam exportações nomeadas individuais, enquanto a importação * como sintaxe de nome importa todos eles. Abaixo estão alguns exemplos para esclarecer a sintaxe.

Importar o conteúdo de todo um módulo

Isso insere myModule no escopo atual, contendo todas as exportações do módulo no arquivo localizado em /modules/my-module.js.

import * as myModule from '/modules/my-module.js';

Aqui, acessar as exportações significa usar o nome do módulo ("myModule" neste caso) como um namespace. Por exemplo, se o módulo importado acima incluir um export doAllTheAmazingThings(), você o chamaria assim:

myModule.doAllTheAmazingThings();

Importar uma única exportação de um módulo

Dado um objeto ou valor chamado myExportque foi exportado do módulo my-module  implicitamente (porque o módulo inteiro é exportado) ou explicitamente (usando a instrução export statement), isso insere  myExport no escopo atual.

import {myExport} from '/modules/my-module.js';

Importar várias exportações do módulo

Isso inclui tanto foo como bar  no escopo atual.

Importar uma exportação com um alias mais conveniente

Você pode renomear uma exportação ao importá-la. Por exemplo, isso insere shortName no escopo atual.

 

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

Renomear várias exportações durante a importação

Importe várias exportações de um módulo com aliases convenientes.

 

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

Importar um módulo apenas para seus efeitos colaterais

Importe um módulo inteiro somente para efeitos colaterais, sem importar nada. Isso executa o código global do módulo, mas na verdade não importa nenhum valor.

 

import '/modules/my-module.js';

Importando Padrões

É possível ter um padrão exportação (seja um objeto, uma função, uma classe etc.). A declaração de importação pode então ser usada para importar esses padrões.

 

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

 

import myDefault from '/modules/my-module.js';

 

Também é possível usar a sintaxe padrão com as vistas acima (importações de namespace ou importações nomeadas). Em tais casos, a importação padrão terá que ser declarada primeiro. Por exemplo:

 

import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace

Ou

 

import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports

 

Importações Dinâmicas

 

A palavra-chave import pode ser chamada como uma função para importar dinamicamente um módulo. Quando usado dessa maneira, retorna uma promessa.

 

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

 

Este formulário também suporta a palavra-chave await.

 

let module = await import('/modules/my-module.js');

 

 

 

 

 

 

 

 

Exemplos

Padrão Import

O código abaixo mostra como importar um módulo secundário para auxiliar no processamento de uma requisição AJAX que retorna um JSON.

 

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

The main program: main.js

 

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

Dynamic Import

Este exemplo mostra como carregar a funcionalidade em uma página com base em uma ação do usuário, nesse caso, um clique no botão e, em seguida, chamar uma função dentro desse módulo. Esta não é a única maneira de implementar essa funcionalidade. A função import() também é compatível com await.

 

const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
  link.addEventListener("click", e => {
    e.preventDefault();

    import('/modules/my-module.js')
      .then(module => {
        module.loadPageInto(main);
      })
      .catch(err => {
        main.textContent = err.message;
      });
  });
}

 

 

Especificações

Especificação Estado Comentário
"function-like" dynamic import() proposal Stage 3  
ECMAScript Latest Draft (ECMA-262)
The definition of 'Imports' in that specification.
Rascunho  
ECMAScript 2018 (ECMA-262)
The definition of 'Imports' in that specification.
Padrão  
ECMAScript 2017 (ECMA-262)
The definition of 'Imports' in that specification.
Padrão  
ECMAScript 2016 (ECMA-262)
The definition of 'Imports' in that specification.
Padrão  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Imports' in that specification.
Padrão Definição inicial.

Compatibilidade entre navegadores

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Basic supportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled 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 No support NoOpera Full support 47Safari Full support 10.1WebView Android Full support 61Chrome Android Full support 61Edge Mobile Full support YesFirefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled 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 Full support 47Safari iOS Full support 10.1Samsung Internet Android No support Nonodejs Full support 8.5.0
Notes Disabled
Full support 8.5.0
Notes Disabled
Notes files must have suffix .mjs, not .js
Disabled From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Full support 63Edge No support No
Notes
No support No
Notes
Notes See development status.
Firefox Full support 66
Notes Disabled
Full support 66
Notes Disabled
Notes See bug 1517546. This flag is enabled by default on nightly builds from Nightly 67. See bug 1522491.
Disabled From version 66: this feature is behind the javascript.options.dynamicImport preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 50Safari Full support 11.1WebView Android Full support 63Chrome Android Full support 63Edge Mobile No support NoFirefox Android Full support 66
Notes Disabled
Full support 66
Notes Disabled
Notes See bug 1517546. This flag is enabled by default on nightly builds from Nightly 67. See bug 1522491.
Disabled From version 66: this feature is behind the javascript.options.dynamicImport preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 50Safari iOS Full support 11.1Samsung Internet Android ? nodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Veja também

Etiquetas do documento e colaboradores

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