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.