Qual a diferença entre require e import numa aplicação JS?

O require e o import são duas formas de importar módulos em JavaScript, mas possuem diferenças em relação à sua sintaxe e principalmente ao contexto em que são utilizados.

O "require" é uma forma de importar módulos que pertence ao CJS (CommonJS), um padrão utilizado no Node.js. Ele é utilizado em versões mais antigas do JavaScript, como o ES5. A sintaxe para utilizar o require é a seguinte:

const modulo = require('nome-do-modulo');

Já o "import" é uma forma de importar módulos que pertence ao ESM (EcmaScript Modules) da versão do ECMAScript (ES6), e esse utilizado em versões mais recentes do JavaScript. A sintaxe para utilizar o import é a seguinte:

import modulo from 'nome-do-modulo';

Agora sobre o contexto que elas são utilizadas, essa é uma das principais diferenças entre o require (CJS) e o import (ESM). O require é síncrono, ou seja, ele carrega os módulos de forma sequencial, enquanto o import é assíncrono, permitindo o carregamento de módulos de forma paralela.

Outra diferença é que o import permite a utilização de recursos como o import { recurso } from 'nome-do-modulo', que possibilita importar apenas recursos específicos de um módulo. Mas, o import também permite a utilização de recursos como o import * as modulo from 'nome-do-modulo', que possibilita importar todos os recursos de um módulo em um objeto.

É importante ressaltar que o import é mais utilizado em projetos que utilizam o ECMAScript (ES6) e o Babel, enquanto o require é mais utilizado em projetos que utilizam o CommonJS, como o Node.js.

Como faço para utilizar require ou import na minha aplicação?

Numa aplicação Node.js, para utilizar o ESM, vá até o package.json da sua aplicação e insira essa propriedade na raiz do objeto:

"type": "module",

Já para o require (CJS) o Node.js considera ele como padrão. Vale que ressaltar que o CJS é definido como padrão de ferramenta de modularidade no Node.js mas nunca foi oficial da linguagem JavaScript. No entanto, a fim de conhecimento o "type": "commonjs" indica a utilização do CJS no projeto. Podemos observar na imagem a seguir os valores da propriedade type:

Bom, espero ter esclarecido essa dúvida e que te ajude a definir o melhor ao seu projeto. Até a próxima! 😊✨