ES6, come puoi esportare un modulo importato in una singola riga?


Risposte:


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

è la modalità ES6 standard, a patto che non sia necessario Moduleessere disponibili anche all'interno del modulo che esegue l'esportazione.

export Module from './Module/Module';

è un modo ESnext proposto per farlo, ma funziona solo se per ora lo hai abilitato in Babel.


Ha funzionato alla grande, tuttavia, sembra che a Webpack non piaccia, dando una notifica che componentora è di sola lettura e non può essere ricaricato a caldo. Molto strano!
Scordato il

perfetto, questa dovrebbe essere la risposta accettata. (se webpack hot reload non piace che questo sia un problema in quello strumento o è il plug-in HMR.)
Benja

18
Se qualcuno si sta chiedendo quale plugin babel sia, è export-extensionsqui - babeljs.io/docs/plugins/transform-export-extensions
Noitidart

@loganfsmyth c'è un modo per esportare quanto sopra come predefinito?
lycuid

4
@ abhishek-kdm export { default as default } fromoexport { default } from
loganfsmyth

24

Non so perché, ma funziona solo per me:

Componenti / index.js:

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

export {Component, Component2, Component3, Component4};

Importo le esportazioni in questo modo:

import {Component, Component2, Component3, Component4} from '../components';

23

Tieni presente che puoi anche riesportare tutto da un modulo:

export * from './Module/Module';

Questa sintassi con caratteri jolly funzionerà solo sui file con esportazioni denominate. Se il file ha solo una singola esportazione predefinita, riceverai l'errore "Nessuna esportazione con nome trovata nel modulo".
dmbaughman

12

Per i componenti React Native questa sintassi funziona per me:

export {default} from 'react-native-swiper';

Questo funziona per me per React (non Native) quando desidero riesportare un predefinito importato. Lo uso nei file index.js che non applicano alcun HOC ai miei componenti "puri"
Shiraz

-1

Quindi, ho trovato che funziona abbastanza bene per la funzionalità di esportazione immediata di avere un index.jsalla radice della componentsdirectory per un facile riferimento:

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

module.exports = {
  Component,
  ComponentTwo
};

Devi usare module.exports.


3
Tieni presente che poiché si tratta in parte di moduli CommonJS, funzionerà in modo specifico solo in Babel e fallirà se tenti di usarlo in un vero modulo ES6 una volta che il loro supporto è arrivato in più ambienti, e probabilmente smetterà di funzionare nelle versioni future di Babele.
loganfsmyth

Corretta. Combinazione di import / export commonJS ed es6 nelle pause di Babel 6. Babel5 ha consentito / rafforzato questo comportamento scorretto. Nel tuo esempio, Componentnon sarà più un riferimento al tuo componente esportato, ma sarà invece un oggetto, con il tuo riferimento all'istanza attivo suComponent.default
Scott Silvi

Qualcuno sa come farlo senza usare module.exports? Mi piace questo metodo di impacchettare un gruppo di componenti in un index.jsma non riesco a capire la sintassi. import x from 'x'; import y from 'y'; export default {x, y};poi import {x} from xy;non funziona (e non riesco a capire perché no)
Alex McMillan

2
Alex, hai provato export {x, y}invece?
jtompl

Questa risposta non è es6. È una piattaforma non EcamScript. -1
rektide
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.