O post ensina como importar e exportar módulos no Javascript fazendo com que seja possível utilizar funções, variáveis e classes de um arquivo em outro.
Como importar e exportar módulos no Javascript
Uma das features mais utilizadas em qualquer projeto Javascript é a impotação e exportação de módulos. Essa feature permite que os devs utilizem funções, variáveis e classes de um arquivo em outro.
Para entendermos como isso funciona vamos pegar como exemplo o arquivo App.js
// App.js
export function soma(a, b) {
return a + b;
}
export const user = {
nome: 'Danilo Filitto',
empresa: 'dfilitto'
};
export default class App {
static log() {
console.log('Hey');
}
}
Nesse primeiro arquivo estamos exportando uma função soma, um objeto user e uma classe App. Note que na última exportação estamos passando a palavra default e dessa forma estamos sinalizando que se não informamos a esse arquivo o quê estamos importando, por padrão ele deve retornar essa classe. Vamos ver como ficaria as importações:
// OutroArquivo.js
import App from 'App'; // Podemos omitir o .js aqui
App.log(); // Hey
soma(1, 2); // Erro: undefined function soma
Note que ele importou apenas a classe App e nada mais. Para importarmos variáveis, objetos ou classes que não estão com a notação default podemos utilizar a desestruturação aprendida anteriormente:
// OutroArquivo.js
import { soma, user } from 'App';
soma(1, 3); // 4
console.log(user.nome); // Diego
Outra forma de importar todas exportações sem a notação default de um arquivo é utilizando o wildcard *. Ao fazer isso helpers irá possuir tudo o que foi definido no arquivo App.js.
// OutroArquivo.js
import * as helpers from 'App';
helpers.soma(1, 3); // 4
console.log(helpers.user.nome); // Diego
Ainda podemos unir a importação do módulo default e das outras exportações em um único import.
import App, { soma, user } from 'App';
Super dicas
Se inscreva em nosso canal e compartilhe as matérias que gostar com os seus colegas.
Participe dos nossos grupos de estudos do Facebook, WhatsApp desenvolvimento de sistemas e WhatsApp desenvolvimento de jogos.
Aproveite também e venha fazer parte do nosso clube de vantagens e ter acesso exclusivo a vídeos, tutoriais, cursos e muito mais.
Clique no link para se tornar um membro do dfilitto – clube de vantagens e ter acesso a todos os benefícios do nosso clube.
Fonte: RocketSeat
