Diferenças entre import e require JavaScript

Neste artigo você vai aprender as diferenças entre import e require em JavaScript, recursos que temos para importar funcionalidades de JS

Fala programador(a), beleza? Bora aprender mais sobre importação e exportação de funcionalidades com JavaScript!

O require é uma forma que foi desenvolvida para Node.js de importar e exportar módulos em uma aplicação

Já o import é um recurso mais novo, que foi desenvolvido na versão ES6 do JavaScript

Sendo assim, o import acaba sendo mais moderno que o require e possui mais funcionalidades

O require aceita apenas exportações por meio do module.exports, que pode conter qualquer tipo de dado, como: objetos, funções, strings

Já o import aceita tanto o module.exports como o export, para receber o código de outros arquivos

Veja alguns exemplos de exportação:

// Modo mais antigo
module.exports = {
 teste: "Testando export"
}

// Modo mais recente
export function teste() {
 console.log("Testando export);
}

E agora as formas de importar com import e require:

// Utilizando require
const teste = require("./teste.js");

// Utilizando import
import * as teste from "./teste.js"

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Lembre-se da compatibilidade: recursos do ES6 não estão totalmente compatíveis com os navegadores

Então você precisa de um transpile para transformar o código ES6 em uma versão mais padronizada

Um transpiler bem conhecido é o Babel

Conclusão

Neste artigo vimos quais são as diferenças entre import e require

O import é uma forma mais recente de importar módulos e te dá mais possibilidades de utilização, como vimos no artigo

Já o require é a forma mais antiga de importar módulos, amplamente utilizada em Node.js até nos dias de hoje

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

CommonJS e ES Modules: os nomes por trás disso tudo

Antes de ir pro código, um detalhe que destrava sua vida

Quando você lê require, o nome do sistema de módulos por trás dele é CommonJS

Quando você lê import, o sistema é o ES Modules, ou ESM, como o pessoal escreve por aí

E por que isso importa? Porque quase toda discussão, erro de terminal e resposta de fórum sobre esse assunto usa esses dois nomes, e não "require" e "import"

Então guarda essa dupla de nomes, ela é a chave pra você procurar a solução certa quando travar 🙂

Carregamento: a diferença que quase ninguém comenta

Até aqui parece só sintaxe diferente, mas o comportamento também muda

O require é resolvido na hora em que aquela linha roda

Ele é uma chamada de função como qualquer outra, e por isso você consegue jogar ele dentro de um if, por exemplo

Já o import é declarativo: ele é lido antes do código rodar, o que deixa as ferramentas enxergarem exatamente o que entra e o que sai de cada arquivo

E por que isso é bom? Porque abre espaço pra otimização, tipo o tree shaking, que descarta o que você importou e nunca usou

Sacou por que o import não é só o require mais bonitinho? 😀

Dá pra misturar import e require no mesmo arquivo?

Aqui mora a maior dor de cabeça de quem está começando

São dois sistemas de módulos diferentes, com regras diferentes de carregamento, então misturar os dois no mesmo arquivo costuma terminar em erro

O caminho tranquilo é padronizar: o arquivo (de preferência o projeto inteiro) fala uma língua só

A forma de avisar o seu ambiente sobre qual dos dois ele deve interpretar muda conforme o runtime e o bundler do projeto, então confere a documentação oficial da ferramenta que você usa antes de sair mexendo na configuração

Tome cuidado! mudar isso no meio de um projeto grande mexe em todos os arquivos de uma vez, não é troca de uma linha só

Qual usar hoje: import ou require?

A pergunta que todo mundo faz, né?

Regra prática: projeto novo, vai de import, porque é a sintaxe da própria linguagem e é pra ela que o JavaScript aponta

Projeto legado em Node que já está inteirinho em require: não sai trocando por trocar, o custo de misturar é maior que o ganho de modernizar uma linha

E se você está aprendendo agora, foca no import e só reconheça o require quando ele aparecer, porque ele ainda aparece MUITO em código que está rodando por aí

Resumo rápido pra fechar:

require: sistema CommonJS, nasceu no mundo Node, exporta com module.exports e é resolvido no momento em que a linha executa

import: sistema ES Modules, veio com o ES6, entende export e também consegue consumir module.exports, e é analisado antes da execução

CommonJS e ES Modules: os nomes por trás disso tudo

Antes de ir pro código, um detalhe que destrava sua vida

Quando você lê require, o nome do sistema de módulos por trás dele é CommonJS

Quando você lê import, o sistema é o ES Modules, ou ESM, como o pessoal escreve por aí

E por que isso importa? Porque quase toda discussão, erro de terminal e resposta de fórum sobre esse assunto usa esses dois nomes, e não "require" e "import"

Então guarda essa dupla de nomes, ela é a chave pra você procurar a solução certa quando travar 🙂

Carregamento: a diferença que quase ninguém comenta

Até aqui parece só sintaxe diferente, mas o comportamento também muda

O require é resolvido na hora em que aquela linha roda

Ele é uma chamada de função como qualquer outra, e por isso você consegue jogar ele dentro de um if, por exemplo

Já o import é declarativo: ele é lido antes do código rodar, o que deixa as ferramentas enxergarem exatamente o que entra e o que sai de cada arquivo

E por que isso é bom? Porque abre espaço pra otimização, tipo o tree shaking, que descarta o que você importou e nunca usou

Sacou por que o import não é só o require mais bonitinho? 😀

Dá pra misturar import e require no mesmo arquivo?

Aqui mora a maior dor de cabeça de quem está começando

São dois sistemas de módulos diferentes, com regras diferentes de carregamento, então misturar os dois no mesmo arquivo costuma terminar em erro

O caminho tranquilo é padronizar: o arquivo (de preferência o projeto inteiro) fala uma língua só

A forma de avisar o seu ambiente sobre qual dos dois ele deve interpretar muda conforme o runtime e o bundler do projeto, então confere a documentação oficial da ferramenta que você usa antes de sair mexendo na configuração

Tome cuidado! mudar isso no meio de um projeto grande mexe em todos os arquivos de uma vez, não é troca de uma linha só

Qual usar hoje: import ou require?

A pergunta que todo mundo faz, né?

Regra prática: projeto novo, vai de import, porque é a sintaxe da própria linguagem e é pra ela que o JavaScript aponta

Projeto legado em Node que já está inteirinho em require: não sai trocando por trocar, o custo de misturar é maior que o ganho de modernizar uma linha

E se você está aprendendo agora, foca no import e só reconheça o require quando ele aparecer, porque ele ainda aparece MUITO em código que está rodando por aí

Resumo rápido pra fechar:

require: sistema CommonJS, nasceu no mundo Node, exporta com module.exports e é resolvido no momento em que a linha executa

import: sistema ES Modules, veio com o ES6, entende export e também consegue consumir module.exports, e é analisado antes da execução