JavaScript

Como incluir um arquivo de JavaScript em outro

13 de agosto de 2020

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!

incluir um arquivo de javascript em outro capa

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á');
}

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

Subscribe
Notify of
guest
2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Gustavo Lins

Oi Matheus, blza?! Inicialmente, queria agradecer pelos seus conteúdos, são muito bons!! Comprei seu curso na Udemy! Se possível, poderia me dar uma pequena luz? Estou treinando e montando uma aplicação com Node e Express. Para validação de formulários tenho um arquivo JS que contém um objeto com as funções de validação para cada tipo de campo dos formulários. Porém estou inicialmente fazendo as validações no backend. Agora estou querendo implementar as mesmas validações no frontend. Para isto, preciso reutilizar o arquivo JS que utilizo nas validações do backend. Minha dificuldade é: Como conseguir acessar/importar este arquivo JS que utilizo… Read more »

Battisti

opa Gustavo, mas isso é realmente necessário? Vejo até como uma má prática =(

O que dá pra fazer é enviar uma cópia do arquivo como texto/JSON na resposta da requisição do cliente, aí você vai reutilizar os mesmos parâmetros…

2
0
Would love your thoughts, please comment.x