Como incluir um arquivo de JavaScript em outro

Neste artigo você vai aprender como incluir um arquivo de JavaScript em outro arquivo de JavaScript, utilizando uma instrução muito simples!

Fala programador(a), beleza? Bora aprender mais sobre importação de arquivos JavaScript!

Nas versões mais antigas da linguagem JavaScript, ou seja, ES5 para baixo

Não existem formas desenvolvidas de como importar um arquivo JavaScript em outro arquivo da linguagem JS

Porém com a vinda do ES6 uma instrução chamada import foi desenvolvida para sanar este problema

Como utilizar o export e o import

No ES6 temos funcionalidades que auxiliam a exportação e importação de conteúdos JavaScript

Veja na prática:

// arquivo teste.js
export function testandoImport() {
  console.log('olá');
}

Formação Recomendada

Formação Claude Code

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

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

E agora para importar:

// arquivo app.js
import { testandoImport } from './teste.js'

testandoImport();

E para utilizar esta estrutura você precisa de um arquivo package.json com o seguinte conteúdo:

{
  "type": "module"
}

Fazendo com que os seus arquivos sejam identificados como módulos

E pronto, você realizou a exportação e importação

Como utilizar o export e require

Os módulos do ES6, como são conhecidos, são amplamente utilizados em Node.js

Consistem basicamente em exportar uma funcionalidade de um arquivo e posteriormente importar as mesmas em outro

Veja um exemplo na prática:

// arquivo teste.js
function testandoImport() {
  console.log('olá');
}

module.exports = {
  testandoImport: testandoImport,
};

No arquivo teste.js estamos utilizando o module.exports para exportar a função testandoImport

Essa é a forma que temos para externalizar algo que contém no arquivo que queremos importar

Agora vejamos a importação:

// arquivo app.js
const teste = require('./teste');

teste.testandoImport();

Dessa forma, no arquivo app.js temos acesso a função testandoImport, tudo isso por causa da instrução require, que é a que importa os recursos de um arquivo JavaScript em outro

Muito cuidado com as funcionalidades do ES6: elas não são suportadas por todos os navegadores, faça uma pesquisa antes de sair utilizando estes recursos

Como dito antes o module.exports e o require são recursos do ES6

Conclusão

Neste artigo vimos como incluir um arquivo de JavaScript em outro

Utilizamos instruções como export e import, para primeiramente exportar recursos e depois exportar

Devemos tomar cuidado com as funcionalidades do ES6, pois elas ainda não são padronizadas em todos os navegadores

Para utilizar os códigos apresentados é aconselhado um transpile dos códigos de JavaScript ES6 para ES5, que é o padrão

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

Como incluir um arquivo JavaScript no HTML:

Antes de importar um arquivo JS dentro de outro, vale lembrar a forma mais clássica de incluir um script: chamar o arquivo direto no HTML

Você usa a tag script com o atributo src apontando pro caminho do arquivo

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

O ideal é colocar essa tag antes de fechar o body, assim o HTML já carregou quando o script for executado

E se você quer usar o import e o export dentro do navegador, precisa avisar que o arquivo é um módulo

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

Com o type="module" o navegador entende os imports sem precisar de configuração extra 🙂

Qual a diferença entre export default e export nomeado?

No exemplo que vimos usamos o export nomeado, repara nas chaves { } na hora de importar

Quando o arquivo tem uma coisa principal pra exportar, dá pra usar o export default

// arquivo teste.js export default function testandoImport() { console.log(‘olá’); }

Na importação você não usa chaves, e ainda pode dar o nome que quiser

// arquivo app.js import qualquerNome from ‘./teste.js’

qualquerNome();

Resumindo: com chaves é export nomeado e o nome tem que bater, sem chaves é export default e você escolhe o nome 😀

Como importar várias funções de um mesmo arquivo:

Você não precisa de um import pra cada função, dá pra trazer várias de uma vez

Basta separar por vírgula dentro das chaves

// arquivo teste.js export function somar(a, b) { return a + b } export function subtrair(a, b) { return a – b }

// arquivo app.js import { somar, subtrair } from ‘./teste.js’

console.log(somar(2, 2)) console.log(subtrair(4, 2))

Simples assim, todos os recursos exportados ficam disponíveis no arquivo que importou

Import ou require: qual usar?

Os dois servem pra trazer código de um arquivo pro outro, a diferença tá no contexto

O import (junto do export) é a forma moderna e é o que você usa no front-end e em projetos novos

O require (junto do module.exports) você encontra muito em projetos Node, principalmente nos mais antigos

Se você tá começando um projeto do zero hoje, o import costuma ser o caminho 🙂