ES6, como você pode exportar um módulo importado em uma única linha?

Respostas:

194
export {default as Module} from './Module/Module';

é a forma padrão do ES6, desde que não seja necessário Moduleestar disponível também dentro do módulo que faz a exportação.

export Module from './Module/Module';

é uma proposta ESnext maneira de fazê-lo, mas que só funciona se você ativá-lo no Babel por enquanto.

loganfsmyth
fonte
Funcionou muito bem, entretanto, parece que o Webpack não gosta disso, notificando que componentagora é somente leitura e não pode ser recarregado a quente. Muito estranho!
Detuned
perfeita, essa deve ser a resposta aceita. (se o webpack hot reload não gostar, isso seja um problema nessa ferramenta ou no plugin HMR.)
Benja
18
Se alguém está se perguntando qual é o plugin do babel, está export-extensionsaqui - babeljs.io/docs/plugins/transform-export-extensions
Noitidart
@loganfsmyth existe uma maneira de exportar o acima como padrão?
licuida de
4
@ abhishek-kdm export { default as default } fromouexport { default } from
loganfsmyth
24

Não sei por que, mas isso funciona para mim:

components / index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

Eu importo as exportações assim:

import {Component, Component2, Component3, Component4} from '../components';
Kamuran Sönecek
fonte
23

Observe que você também pode reexportar tudo de um módulo:

export * from './Module/Module';
RynoRn
fonte
Essa sintaxe curinga só funcionará em arquivos com exportações nomeadas. Se o arquivo tiver apenas uma exportação padrão, você receberá o erro "Nenhuma exportação nomeada encontrada no módulo".
dmbaughman
12

Para componentes do React Native, esta sintaxe funciona para mim:

export {default} from 'react-native-swiper';
Cherniv
fonte
Isso funciona para mim para React (não nativo) quando desejo reexportar um padrão importado. Eu uso isso em arquivos index.js que não aplicam HOCs aos meus componentes 'puros'
Shiraz
-1

Portanto, descobri que isso funciona muito bem para a funcionalidade de exportação imediata de ter um index.jsna raiz do componentsdiretório para facilitar a referência:

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

Você precisa usar module.exports.

Detuned
fonte
3
Tenha em mente que, uma vez que se trata de módulos parcialmente CommonJS, isso só funcionará especificamente no Babel e falhará se você tentar usá-lo em um módulo ES6 real, uma vez que o suporte para eles chegar a mais ambientes e provavelmente irá parar de funcionar em versões futuras do Babel.
loganfsmyth
Corrigir. Misturando commonJS e es6 importação / exportação no Babel 6 quebras. Babel5 permitiu / reforçou este comportamento incorreto. Em seu exemplo, Componentnão será mais uma referência ao seu componente exportado, mas será um objeto, com sua referência de instância viva emComponent.default
Scott Silvi
Alguém sabe fazer isso sem usar module.exports? Eu gosto desse método de empacotar um monte de componentes em um, index.jsmas não consigo descobrir a sintaxe. import x from 'x'; import y from 'y'; export default {x, y};então import {x} from xy;não funciona (e não consigo descobrir por que não)
Alex McMillan
2
Alex, você tentou em export {x, y}vez disso?
jtompl
Esta resposta não é ES6. É uma plataforma não EcamScript. -1
rektide