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.

loganfsmyth
la source
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';
Kamuran Sönecek
la source
23

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

export * from './Module/Module';
RynoRn
la source
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';
Tcherniv
la source
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.

Désaccordé
la source
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