import

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 de referência para a 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.

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.

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();

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

Isso inclui tanto foo como bar no escopo atual.

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

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

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

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

É 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

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');

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

O programa principal: main.js

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

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

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

• export
• import.meta
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• ES modules: A cartoon deep-dive, Hacks blog post by Lin Clark
• Axel Rauschmayer's book: "Exploring JS: Modules"