11

Qual é a diferença entre se utilizar a palavra reservada export e export default. Por exemplo:

export class Helper { } 

export default class Helper { } 
1

1 Resposta 1

20

Ambos comandos são utilizados para criar módulos, e permitir que ao importar em outro arquivo, possa ser utilizado tudo que há naquele módulo.

A principal diferença é, como o próprio nome sugere (default), o export default é o membro (class, variável, const, etc) se expõe por padrão naquele módulo e, portanto, só pode haver um membro padrão sendo exportado por módulo.

Qual a vantagem disso? Diferente de um export explícito ou nomeado, o default não precisa ser referenciado com o mesmo nome ao ser importado.

Pegando o exemplo da pergunta: export default class Helper { }

Isso poderia ser importado assim:

import abobrinha from 'nome-do-module';
var a = new abobrinha();

Isso é possível pois como é o default daquele módulo, pode-se importar com qualquer nome que sempre vai referenciar aquele membro.

Já o export nomeado, tem de ser importado exatamente com o mesmo nome, por permitir exportar vários membros dentro de um mesmo módulo, pois seria impossível saber qual membro desejamos usar.

Para ilustrar, imagine esse módulo exportado:

export class Helper { } 
export class Logger { }

Ao importar, não poderia usar outro nome assim, pois não seria possível saber de qual membro estamos nos referindo:

import abobrinha from 'nome-do-module';

Obrigatoriamente deve-se seguir os nomes com os quais foram exportados:

import { Helper, Logger} from 'nome-do-module';

Mais detalhes aqui: mozilla/export

6
  • 1
    quando eu utilizo export default nenhum membro fica exporto certo? Então esse e o motivo de o export default nao expor nenhuma propriedade da minha exportação ? tipo com export consigo acessar algum metodo da minha classe, já com export default não. Commented 25/07/2019 às 19:17
  • 1
    sim fica exposto, é um export afinal, mas como ele é default só pode exportar um membro por módulo dessa forma Commented 25/07/2019 às 19:19
  • inclusive como não é necessário nome, podia exportar uma function anônima até: export default function () { algum código }; Commented 25/07/2019 às 19:21
  • o nome do import (export default é simbolico neste caso) uma referencia do meu arquivo, certo Commented 25/07/2019 às 19:25
  • isso, seria como "importa ai o que tiver nesse arquivo com esse nome" :) Commented 25/07/2019 às 19:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .