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.