ES6, wie können Sie ein importiertes Modul in einer einzigen Zeile exportieren?

Antworten:

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

ist die Standardmethode von ES6, solange Sie nicht Moduleauch innerhalb des Moduls verfügbar sein müssen, das den Export ausführt.

export Module from './Module/Module';

ist eine vorgeschlagene ESnext-Methode, die jedoch nur funktioniert, wenn Sie sie vorerst in Babel aktiviert haben.

loganfsmyth
quelle
Es hat großartig funktioniert, aber es scheint, dass Webpack dies nicht mag und eine Benachrichtigung gibt, dass das componentjetzt schreibgeschützt ist und nicht im laufenden Betrieb neu geladen werden kann. Sehr eigenartig!
Verstimmt
Perfekt, dies sollte die akzeptierte Antwort sein. (Wenn Webpack Hot Reload nicht mag, ist das ein Problem in diesem Tool oder es ist HMR-Plugin.)
Benja
18
Wenn sich jemand fragt, um welches Babel-Plugin es sich handelt, finden Sie es export-extensionshier - babeljs.io/docs/plugins/transform-export-extensions
Noitidart
@loganfsmyth gibt es eine Möglichkeit, die oben genannten als Standard zu exportieren?
Lycuid
4
@ abhishek-kdm export { default as default } fromoderexport { default } from
loganfsmyth
24

Ich weiß nicht warum, aber genau das funktioniert bei mir:

components / index.js:

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

export {Component, Component2, Component3, Component4};

Ich importiere die Exporte wie folgt:

import {Component, Component2, Component3, Component4} from '../components';
Kamuran Sönecek
quelle
23

Bitte beachten Sie, dass Sie auch alles aus einem Modul erneut exportieren können:

export * from './Module/Module';
RynoRn
quelle
Diese Platzhaltersyntax funktioniert nur bei Dateien mit benannten Exporten. Wenn die Datei nur einen einzigen Standardexport hat, wird die Fehlermeldung "Keine benannten Exporte im Modul gefunden" angezeigt.
dmbaughman
12

Für React Native-Komponenten funktioniert diese Syntax für mich:

export {default} from 'react-native-swiper';
Cherniv
quelle
Dies funktioniert bei React (nicht Native), wenn ich einen importierten Standard erneut exportieren möchte. Ich verwende dies in index.js-Dateien, die keine HOCs auf meine 'reinen' Komponenten anwenden
Shiraz
-1

Daher habe ich festgestellt, dass dies für die sofortige Exportfunktionalität sehr gut funktioniert, da sich index.jsim Stammverzeichnis des componentsVerzeichnisses ein Verzeichnis zum einfachen Referenzieren befindet:

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

module.exports = {
  Component,
  ComponentTwo
};

Sie müssen verwenden module.exports.

Verstimmt
quelle
3
Da dies teilweise CommonJS-Module sind, funktioniert dies nur in Babel und schlägt fehl, wenn Sie versuchen, es in einem echten ES6-Modul zu verwenden, sobald die Unterstützung für sie in mehr Umgebungen verfügbar ist, und in zukünftigen Versionen von wahrscheinlich nicht mehr funktioniert Babel.
Loganfsmyth
Richtig. Vermischen von CommonJS & ES6-Import / Export in Babel 6-Pausen. Babel5 hat dieses falsche Verhalten zugelassen / verstärkt. In Ihrem Beispiel handelt Componentes sich nicht mehr um eine Referenz auf Ihre exportierte Komponente, sondern um ein Objekt, auf dem Ihre Component.default
Instanzreferenz
Weiß jemand, wie man das macht, ohne es zu benutzen module.exports? Ich mag diese Methode, eine Reihe von Komponenten in eine zu index.jspacken, kann aber die Syntax nicht herausfinden. import x from 'x'; import y from 'y'; export default {x, y};dann import {x} from xy;funktioniert es nicht (und ich kann nicht herausfinden, warum nicht)
Alex McMillan
2
Alex, hast du es export {x, y}stattdessen versucht ?
Jtompl
Diese Antwort lautet nicht es6. Es ist eine Nicht-EcamScript-Plattform. -1
rektide