ES6 exportando / importando no arquivo de índice


202

Atualmente, estou usando o ES6 em um aplicativo React via webpack / babel. Estou usando arquivos de índice para reunir todos os componentes de um módulo e exportá-los. Infelizmente, é assim:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

Então, posso importá-lo de outros lugares como este:

import { Comp1, Comp2, Comp3 } from './components';

Obviamente, essa não é uma solução muito boa, então eu estava pensando, se havia alguma outra maneira. Não consigo exportar o componente importado diretamente.


Respostas:


369

Você pode reexportar facilmente a importação padrão:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

Há também uma proposta para o ES7 ES8 que permitirá que você escreva export Comp1 from '…';.


2
Veja também padrões semelhantes aqui e aqui
Bergi

6
Além da proposta do ES8, você pode usar a geração de código para manter os arquivos de índice. Dê uma olhada em github.com/gajus/create-index e github.com/ryardley/indexr .
Gajus

@ Bergi Então, essas três linhas importam e exportam? Ou isso é apenas exportação, mas você não precisa mais mexer no nome do Comp1_, etc.?
musicformellons

@musicformellons Eles exportam diretamente do módulo referenciado, sim.
Bergi 24/09/16

2
@amann Uma referência circular por si só não é ruim, mas pode levar a problemas, dependendo do que o módulo faz. Independentemente disso, acho que você só deve usar esse padrão no arquivo de índice da sua biblioteca para exportar todos os componentes e, se tiver dependências entre módulos, deverá importá-los diretamente, em vez de importar a peça da grande. Com isso, nenhuma referência circular é introduzida por esse padrão.
Bergi 14/10

56

Além disso, lembre-se de que, se você precisar exportar várias funções ao mesmo tempo, como ações, poderá usar

export * from './XThingActions';

14
Sim. Infelizmente, isso exige apenas exportações nomeadas, ou seja, não inclui a exportação padrão.
ArneHugo

me entenda (bastante enganador ... demorei um momento) SyntaxError: Unexpected reserved word, a resposta aceita de Bergi funciona.
precisa saber é o seguinte

Você também pode nomear sua exportação padrão para solucionar esse problema. E suas ações não devem ter uma exportação padrão, portanto, esta solução funciona bem.
Barry Michael Doyle

2
A melhor prática é não usar exportações padrão em javascript, sintaxe extra desnecessária. A @GM tem a melhor resposta nesse segmento para javascript moderno.
Mibbit

39

Tarde demais, mas quero compartilhar a maneira como resolvo isso.

Tendo o modelarquivo que possui dois nomes de exportação:

export { Schema, Model };

e com o controllerarquivo que possui a exportação padrão:

export default Controller;

Eu expus no indexarquivo desta maneira:

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

e supondo que eu queira importar todos eles:

import { Schema, Model, Controller } from '../../path/';

Isso funciona quando você importa uma função e depois a exporta de volta? Eu tentei, mas não o fez.
Aftab Naveed

Desculpe, na verdade funcionou, estava faltando / no meu caminho.
Aftab Naveed

14

Simplesmente:

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

Ou pelos nomes das funções:

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

Mais informações: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.