Como importar e exportar módulos no Javascript

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