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.

MoeSattler
fonte
Possível duplicado de módulos de importação de arquivos no diretório
Inanc Gumus

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 '…';.

Bergi
fonte
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';
GM
fonte
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/';
Javier Aguila
fonte
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

pirs
fonte
1

Instalar @babel/plugin-proposal-export-default-fromvia:

yarn add -D @babel/plugin-proposal-export-default-from

No seu .babelrc.jsonou em qualquer um dos tipos de arquivo de configuração

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

Agora você pode exportdiretamente de file-path:

export Foo from './components/Foo'
export Bar from './components/Bar'

Boa sorte...

Akash
fonte
Como fazer isso no Create-React-App sem ejetar?
Negin Basiri