37

Sei que import e require são usados em JavaScript para importar funções ou objetos de terceiros. É comum trechos de código como:

import Library from 'some-library';

ou

const Library = require('some-library');

Porém, vejo que não há uma padronização quanto ao uso de import ou require.

Por exemplo: quando vejo um código Node.js usa-se sempre require. Em códigos relacionados à ES6 ou TypeScript usa-se quase sempre import.

Minha questão é: qual a diferença entre essas duas abordagens? Quando devo (ou posso) usar cada uma dessas abordagens?

Obrigado pela ajuda.

1

2 Respostas 2

59

Essas ferramentas pertencem a gerações diferentes.

O require existe só em CommonJS (a maneira que o Node.js criou para importar e exportar modulos dentro de uma aplicação), e o import é ES6, ou seja uma nova ferramenta que ambos JavaScript do browser e JavaScript do servidor (Node.js) podem usar.

Para além dessa diferença histórica há diferenças de utilização, onde o import é mais flexivel, moderno e poderoso que o require.

É importante contudo ter em conta que alguns browsers ainda não suportam ES6, por isso pode ser preciso compilar antes de usar.

O require usa module.exports, que é a sintaxe "antiga" (mas ainda válida) para exportar um módulo, e que pode ser o que quisermos, um objeto, uma string, etc.

O import usa ambos, ou seja podes usar module.exports e export, e permite exportar vários pedaços de código mais ou menos como o module.export fazia. Uma das vantagens do import é que pode importar só partes do que foi exportado:

Exemplos:

Ficheiro que exporta:

// ficheiro A.js

// sintaxe CommonJS
module.exports = {
    foo: function(){ return 'bar';},
    baz: 123
}

// sintaxe ES6
export function foo(){ return 'bar';}
export const baz = 123;

// ou

function foo(){ return 'bar';}
const baz = 123;

export default {foo, baz};

Ficheiro que importa:

// ficheiro B.js

// sintaxe CommonJS
const A = require('./A.js');
const foo = A.foo;
const baz = A.baz;

// sintaxe ES6
import * as A from './A.js';
const foo = A.foo;
const baz = A.baz;

// ou somente
import {foo, baz} from './A.js';

Quando usas export default (sintaxe ES6) isso implica que só exportas uma coisa por ficheiro. Se for um objeto o import pode importar só pedaços, mas se for uma função por exemplo então podes usar somente import foo from './A.js'; sem precisar de {} ou * as foo.

0
-2

Esta tabela mostra as diferenças de uso entre require e import:

Versão Importação Exportação
CommonJS require module.exports
ES6+ import export

Além disso,

Você não pode carregar seletivamente apenas as partes necessárias com require, mas com import, você pode carregar seletivamente apenas as partes necessárias, o que pode economizar memória.

Com require, o carregamento é síncrono (passo a passo). Por outro lado, import pode ser assíncrono (sem esperar pela importação anterior), portanto, pode ter um desempenho um pouco melhor do que o require.

Fonte: https://stackoverflow.com/a/46677972/4072641

2
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    2/01/2023 às 20:48
  • Tudo bem. Confesso que a resposta do Sergio está mais completa que a minha, mas minha intenção foi apenas agregar com um pouco mais de informações. A propósito, se você seguir a fonte de onde tirei a resposta, verá que é simplesmente a resposta mais votada e aceita pelo autor, no site oficial stackoverflow. 3/01/2023 às 13:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .