ES Modules §

---

ES Modules, ou ECMAScript Modules, são a implementação de módulos padrão do JavaScript, introduzida no ECMAScript 6 (também conhecido como ES6). Ao contrário do CommonJS, os módulos ES são assíncronos por padrão, o que significa que as dependências são resolvidas de forma assíncrona, melhorando a eficiência em ambientes onde o carregamento assíncrono é preferível, como navegadores da web.

Declaração import §

Uso básico §

import { [variáveis...], [funções...] } from "[arquivo]"

Nota

[arquivo] é necessário informar o caminho relativo do arquivo

import { nome, sobrenome, idade, soma } from "./modulo1"
 
console.log(nome, sobrenome, idade, soma(10, 10));

Importar uma variável/função/classes com outro nome §

import { [variável/função/classes] as [novo nome] } from "[arquivos]"

import { nome as luiz } from "./modulo1";
 
const nome = "João";
 
console.log(nome, luiz);

import { Pessoa as NovaPessoa } from "./modulo1";

Importar tudo de um arquivo §

import * as [apelido] from "[arquivo]"

import * as MeuModulo from "./modulo1";
 
console.log(MeuModulo.luiz); // Luiz
console.log(MeuModulo.sobrenome); // Miranda
console.log(MeuModulo.idade); // 30
console.log(MeuModulo.soma(1, 2)); // 3

Importar uma variável/função/classe padrão do arquivo (export default) §

import [export padrão], { [variável/função/classe] } from "[arquivo]"

Nota

Quando for importar uma variável/função/classe padrão do arquivo, não se deve utilizar {}.

// modulo1.js
export const nome = "Luiz";
 
export default (x, y) => x + y;
 
// index.js
import soma, { nome } from "./modulo1";
 
console.log(soma(1, 2)); // 3
console.log(nome); // Luiz

---

Declaração export §

Declarar uma variável/função/classes e depois exportá-la §

export { [variáveis...], [funções...], [classes...] }

const nome = "Luiz";
const sobrenome = "Miranda";
const idade = 30;
 
function soma(x, y) {
	return x + y;
}
 
export { nome, sobrenome, idade, soma };

Exportar uma variável/função/classes com outro nome §

export { [variável/função/classes] as [novo nome] }

const nome = "Luiz";
const sobrenome = "Miranda";
const idade = 30;
 
function soma(x, y) {
	return x + y;
}
 
export { nome as luiz, sobrenome, idade, soma };

Declarar e exportar uma variável/função/classes §

export [assinatura da variável/função/classe]

export const sobrenome = "Miranda";

export function soma(x, y) {
	return x + y;
}

export class Pessoa {
	constructor(nome, sobrenome) {
	  this.nome = nome;
	  this.sobrenome = sobrenome;
	}
}

---

Declaração export default §

A declaração export default serve para definir um export de uma variável/função/classe padrão do arquivo.

Observação

Só é permitido ter 1 export default por arquivo

Exportar funções/classes §

export default [assinatura da função/classe]

export default function soma(x, y) {
	return x + y;
}

export default class Pessoa {
	// ...
}

Exportar variáveis §

// declaração da variável
 
export { [variável] as default }

const nome = "Luiz";
const sobrenome = "Otávio";
 
export { nome as default, sobrenome }

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado