ES6, comment exporter un module importé en une seule ligne?


Réponses:


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

est la méthode ES6 standard, tant que vous n'avez pas besoin Moduled'être également disponible à l'intérieur du module effectuant l'exportation.

export Module from './Module/Module';

est un moyen proposé par ESnext de le faire, mais cela ne fonctionne que si vous l'avez activé dans Babel pour le moment.


Cela a très bien fonctionné, cependant, il semble que Webpack n'aime pas cela, donnant une notification indiquant que le componentest maintenant en lecture seule et ne peut pas être rechargé à chaud. Très étrange!
Désaccordé le

parfait, cela devrait être la réponse acceptée. (si le rechargement à chaud du webpack n'aime pas, c'est un problème dans cet outil ou c'est le plugin HMR.)
Benja

18
Si quelqu'un se demande de quel plugin babel il s'agit, il est export-extensionsici - babeljs.io/docs/plugins/transform-export-extensions
Noitidart

@loganfsmyth existe-t-il un moyen d'exporter ce qui précède par défaut?
lycuid

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

25

Je ne sais pas pourquoi mais cela fonctionne pour moi:

composants / index.js:

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

export {Component, Component2, Component3, Component4};

J'importe les exportations comme ceci:

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

23

Veuillez noter que vous pouvez également tout réexporter à partir d'un module:

export * from './Module/Module';

Cette syntaxe générique fonctionnera uniquement sur les fichiers avec des exportations nommées. Si le fichier n'a qu'une seule exportation par défaut, vous obtiendrez l'erreur "Aucune exportation nommée trouvée dans le module".
dmbaughman

12

Pour les composants React Native, cette syntaxe fonctionne pour moi:

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

Cela fonctionne pour moi pour React (non natif) lorsque je souhaite réexporter une valeur par défaut importée. J'utilise ceci dans les fichiers index.js qui n'appliquent aucun HOC à mes composants `` purs ''
Shiraz

-1

Donc, j'ai trouvé que cela fonctionnait assez bien pour la fonctionnalité d'exportation immédiate d'avoir un index.jsà la racine du componentsrépertoire pour un référencement facile:

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

module.exports = {
  Component,
  ComponentTwo
};

Vous devez utiliser module.exports.


3
Gardez à l'esprit que, comme il s'agit partiellement de modules CommonJS, cela ne fonctionnera que spécifiquement dans Babel et échouera si vous essayez de l'utiliser dans un vrai module ES6 une fois que leur prise en charge arrive dans plus d'environnements, et cessera probablement de fonctionner dans les futures versions de Babel.
loganfsmyth

Correct. Mélange d'import / export commonJS & es6 dans Babel 6 breaks. Babel5 a autorisé / renforcé ce comportement incorrect. Dans votre exemple, Componentne sera plus une référence à votre composant exporté, mais sera plutôt un objet, avec votre référence d'instance vivanteComponent.default
Scott Silvi

Quelqu'un sait comment faire cela sans utiliser module.exports? J'aime cette méthode d'empaquetage d'un tas de composants dans un index.jsmais je ne peux pas comprendre la syntaxe. import x from 'x'; import y from 'y'; export default {x, y};alors import {x} from xy;ne fonctionne pas (et je ne comprends pas pourquoi)
Alex McMillan

2
Alex, avez-vous essayé à la export {x, y}place?
jtompl

Cette réponse n'est pas es6. C'est une plate-forme non EcamScript. -1
rektide
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.