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.


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

23

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

export * from './Module/Module';

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

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.


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
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.