Lembro que quando comecei a codificar, via alguns arquivos js usando require() para importar módulos e outros arquivos usando import. Isso sempre me confundiu porque eu realmente não entendia qual era a diferença ou por que havia inconsistência entre os projetos. Se você está se perguntando a mesma coisa, continue lendo!

O que é CommonJS?

CommonJS é um conjunto de padrões usado para implementar módulos em JavaScript do lado do servidor, principalmente ambientes Node.js. Neste sistema, os módulos são carregados de forma síncrona, o que significa que a execução do script fica bloqueada até que o módulo seja carregado. Isso é uma abordagem direta, mas a desvantagem é um impacto no desempenho se você estiver tentando carregar vários módulos diferentes, pois eles teriam que carregar um após o outro antes que qualquer outra coisa pudesse ser executada.

Ao usar CommonJS você usaria module.exports para exportar funcionalidade e usar require() para importá-la.

Aqui está um exemplo de como isso ficaria no código.

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

O que é ECMAScript (ES6)?

ES6, também conhecido como ECMAScript, é uma versão mais recente do JavaScript lançada em 2015. Com esta versão veio a capacidade de importar módulos de forma assíncrona usando as instruções de importação e exportação. Isso significa que o script que você está executando pode continuar a ser executado enquanto o módulo está sendo carregado, para que não haja gargalos. Isso também permite uma eficiência chamada tree-shaking, que abordarei em um post posterior, mas basicamente, isso significa que você só carrega JavaScript a partir de um módulo que está usando e o código morto (código que não está sendo usado) não é carregado no navegador. Tudo isso é possível porque o ES6 suporta importações estáticas e dinâmicas.

Aqui está o mesmo exemplo de antes, mas desta vez estamos usando importação e exportação.

// In file multiply.js

export const multiply = (x, y) => x * y;

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

As principais diferenças: exigir importação vs.

require() faz parte do sistema de módulos CommonJS enquanto import faz parte do sistema de módulos ES6. Você verá require() usado em ambientes Node.js para desenvolvimento no lado do servidor, principalmente em projetos legados que ainda não adotaram o ES6. Você verá a importação usada no desenvolvimento do lado do servidor e do front-end, especialmente em projetos mais recentes e com qualquer uma das estruturas de front-end, como React ou Vue.

Por que importar é melhor do que exigir?

Como mencionamos anteriormente, a importação é assíncrona, o que pode levar a um melhor desempenho, especialmente em aplicações grandes. Além disso, como a importação pode ser analisada estaticamente, ferramentas como linters e bundlers podem otimizar o código de forma mais eficaz e implementar a agitação da árvore, o que leva a pacotes menores e tempos de carregamento mais rápidos. A sintaxe também é mais fácil de ler do que require() o que contribui para uma melhor experiência do desenvolvedor, e todos nós queremos isso!

Quando você usaria exigir importação Vs

Você usaria require() quando:

• Você está trabalhando em um projeto legado do Node.js que foi iniciado antes do lançamento do ES6 e não foi atualizado.

• Você precisa carregar módulos dinamicamente em tempo de execução, como em um arquivo de configuração, ou se precisar carregar módulos condicionalmente.

Você usaria importação quando:

• Em qualquer outro momento, pois este é o padrão agora e mais eficiente.

Resumo

Em geral, é recomendado usar import sempre que possível, pois oferece mais benefícios e é o sistema de módulos mais novo e mais amplamente adotado. No entanto, pode haver casos em que require() ainda seja a melhor escolha, dependendo de seus requisitos específicos e do ambiente em que você está trabalhando.

Se você achou este artigo útil, assine meu boletim informativo, onde enviarei mais conteúdo como este diretamente para sua caixa de entrada semanalmente!