Frontend Academy · Aula

Módulos: import e export

Divida o código em módulos ES com exportações nomeadas e padrão, importe seletivamente e entenda como os empacotadores de módulos resolvem o grafo de dependências.

Módulos: import e export é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que usar módulos?

Antes dos módulos, todo o JavaScript era executado no escopo global. As variáveis entravam em conflito. A ordem do código importava. Os arquivos precisavam ser carregados em sequência. Os módulos ES dão a cada arquivo seu próprio escopo, importações explícitas e exportações otimizáveis pela eliminação de código não utilizado.

Exportações nomeadas

Exporte valores específicos com a palavra-chave export. Um arquivo pode ter várias exportações nomeadas. Quem as utiliza importa exatamente o que precisa.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Importações nomeadas

Importe exportações nomeadas usando chaves. É possível importar várias exportações de um módulo em uma única instrução.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

Exportações padrão

Cada módulo pode ter uma exportação padrão — normalmente, o recurso principal fornecido pelo módulo. Importe-a sem chaves e atribua-lhe qualquer nome.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Reexportação

Um módulo pode reexportar elementos de outros módulos para criar um arquivo agregador — um único ponto de entrada que reexporta vários elementos.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

// Consumer:
import { Button, Input, Modal } from './components';

Importações para um espaço de nomes

Importe tudo de um módulo para um objeto de espaço de nomes usando import * as name. Isso é útil quando precisa de muitas exportações ou quer deixar explícita a origem.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

Importações apenas por efeitos colaterais

Alguns módulos são importados exclusivamente por seus efeitos colaterais (preenchimentos de compatibilidade, registro de manipuladores de eventos). Importe-os sem vinculá-los a um nome.

import './polyfills.js'; // runs the code, imports nothing

import() dinâmico — divisão de código

A função import() dinâmica retorna uma Promise. Use-a para carregar um módulo sob demanda — somente quando necessário. Os empacotadores criam automaticamente um bloco separado para os módulos importados dinamicamente.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta é um objeto especial disponível dentro dos módulos. import.meta.url é a URL do módulo. Vite usa import.meta.env para variáveis de ambiente.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Resolução de módulos

Empacotadores como Vite resolvem módulos a partir do sistema de arquivos (caminhos relativos como './utils'), de node_modules ('lodash') ou de aliases de caminho ('@/components' configurados em vite.config.js).

CommonJS vs módulos ES

Node.js usava originalmente CommonJS (require / module.exports). O navegador usa módulos ES (import / export). O Node.js moderno também aceita módulos ES com type: "module" em package.json.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Verificação rápida

Qual é a principal vantagem de usar dynamic import() em vez de uma importação estática?

Recapitulação: módulos ES

Exportações e importações nomeadas para vários valores. Exportação e importação padrão para o recurso principal. Reexportações criam arquivos agregadores. import() dinâmico permite carregamento sob demanda e divisão de código. import.meta fornece metadados do módulo. Os empacotadores resolvem aliases, node_modules e caminhos relativos.

Perguntas Frequentes

A aula “Módulos: import e export” é grátis?

Sim — o texto completo de “Módulos: import e export” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Módulos: import e export”?

Divida o código em módulos ES com exportações nomeadas e padrão, importe seletivamente e entenda como os empacotadores de módulos resolvem o grafo de dependências. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Módulos: import e export”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Métodos de array: map filter reduce find
Desestruturação e spread de objetos
Literais de template e encadeamento opcional
Módulos: import e export

← Voltar para Frontend Academy