Como incluir um arquivo JS dentro de outro: 5 métodos funcionais

«Monte seu código em pedaços»: por que não se pode simplesmente inserir um arquivo JS dentro de outro

Todo mundo que programou em JavaScript por mais de algumas semanas, mais cedo ou mais tarde, esbarra em uma parede: «Como uso funções de outro arquivo? Não vou copiá-las de um lado para o outro?!» O bom e velho Stack Overflow sabe disso muito bem — a pergunta "How do I include a JavaScript file in another JavaScript file?" recebe milhares de visualizações todos os meses. E isso é lógico: em projetos reais, o código cresce rapidamente e manter tudo em um único arquivo é o caminho para o caos.

Neste artigo, vamos analisar 5 maneiras comprovadas de incluir um arquivo JS dentro de outro. Desde métodos antigos até padrões modernos. Vamos lá!

Método 1: Clássico <script> no HTML

A maneira mais simples e pré-histórica é simplesmente adicionar várias tags <script> no seu arquivo HTML. Mas há um detalhe: os arquivos são carregados sequencialmente. Se o seu main.js depende do utils.js, então o utils.js deve vir antes.

<!DOCTYPE html><html><head>    <script src="utils.js"></script>    <script src="main.js"></script></head><body>    ...</body></html>

Problema: Isso não é incluir um arquivo JS dentro de outro arquivo JS, é apenas a ordem de carregamento. Se você tem 20 scripts, corre o risco de se confundir com as dependências. Além disso, todas as variáveis e funções se tornam globais — olá, conflitos de nomes!

Método 2: Módulos ES6 (padrão moderno)

A partir do ES6 (ECMAScript 2015), o JavaScript ganhou um sistema de módulos nativo. Esta é a maneira mais correta de incluir um arquivo JS em outro em projetos modernos.

Exportação do arquivo (math.js)

// math.jsexport function add(a, b) {    return a + b;}

export const PI = 3.14159;

export default function multiply(a, b) {    return a * b;}

Importação em outro arquivo (app.js)

// app.jsimport multiply, { add, PI } from './math.js';

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

Importante: Para funcionar no navegador, é necessário adicionar o atributo type="module" no HTML:

<script type="module" src="app.js"></script>

Este método resolve todos os problemas: isolamento de código, dependências claras, ausência de variáveis globais. Ideal para aplicações web modernas.

Método 3: Node.js require (CommonJS)

Se você programa para Node.js, o padrão é o CommonJS com a função require(). Esta forma de incluir um arquivo JS em outro arquivo JS ainda é usada no desenvolvimento server-side (embora os módulos ES6 já tenham chegado lá também).

Exportação (utils.js)

// utils.jsfunction greet(name) {    return `Olá, ${name}!`;}

const secret = 'myPassword123';

module.exports = {    greet,    secret};

Importação (server.js)

// server.jsconst utils = require('./utils.js');

console.log(utils.greet('Alex')); // Olá, Alex!console.log(utils.secret);          // myPassword123

Simples, confiável, funciona em qualquer lugar onde haja Node.js. Para navegadores — não, apenas através de bundlers (Webpack, Vite).

Método 4: Carregamento dinâmico de scripts (criando tag script)

Às vezes é necessário incluir um arquivo JS de outro arquivo JS diretamente durante a execução. Por exemplo, quando você carrega uma ferramenta de análise ou um plugin apenas quando necessário. Para isso, você pode criar dinamicamente uma tag <script>.

// loadScript.jsfunction loadScript(src, callback) {    const script = document.createElement('script');    script.src = src;    script.onload =