Wie exportiere ich importierte Objekte in ES6?

242

Der Anwendungsfall ist einfach: Ich möchte nur ein Objekt mit dem Namen exportieren, so wie es importiert wurde.

beispielsweise:

import React from 'react';
export React;

aber das funktioniert nicht. Ich muss schreiben:

import React from 'react';
export const React = React;

Aber das ist seltsam. Was ist der richtige Weg, um dies zu tun?

AKTUALISIERT :

Vielen Dank für Hilfe und Hinweise. Ich habe mein Problem mit vielen Hinweisen gelöst. Ich möchte einige häufige Fälle für mich und die Lösungen teilen.

Export Importe

import d, {obj} from '...';

export {obj, d};
export {obj as name1, d as name2};

Exportieren Sie alle benannten Importe erneut

export * from '...';
export * as name1 from '...';

Einige benannte Importe erneut exportieren

export {a, b as name1} from '...';

Standardimport als Standardexport erneut exportieren

export {default} from '...';

Standardimport als benannter Export erneut exportieren

export {default as name1} from '...';
import export ecmascript-6 Yao Zhao
quelle
Warum würden Sie exportieren reagieren?
Omarjmh
Sie können export {React}aber wieder, wenn Sie irgendwo reagieren müssen, sollten Sie es einfach dort importieren.
Loganfsmyth
2
Die Exportreaktion ist nur ein Beispiel. Ich möchte ein Projekt organisieren, damit der Benutzer ein Objekt in einem kürzeren und übergeordneten Pfad importieren kann.
Yao Zhao
Vielen Dank für das Update. Es löste jedes Problem, das ich mit ES6 / 7 hatte. Ich schlage vor, dies als Antwort hinzuzufügen und zu akzeptieren.
Florian Wendelborn
12
export * as name1 from '...';Dies funktioniert bei mir nicht (mit Webpack 2). Irgendwelche Ideen?
Entity Black

Antworten:

131

In index.js-Dateien, aus denen mehrere Dateien bestehen, mache ich häufig Folgendes:

export {default as SomeClass} from './SomeClass';
export {someFunction} from './utils';
export {default as React} from 'react';

Dieser Blogeintrag enthält einige nette zusätzliche Beispiele.

Wichtige Notiz

Sie sollten diese Eslint-Regel kennen, wenn Sie auf diese exportierten Importe zugreifen. Grundsätzlich sollten Sie in einer anderen Datei nicht:

import SomeClassModule from 'SomeClass/index.js';
SomeClassModule.someFunction(); // Oops, error

Du solltest das tun:

import SomeClassModule, {someFunction} from 'SomeClass/index.js';
someFunction(); // Ok
Eric H.
quelle
36

Sie können importierte Dateien mit einer solchen Struktur exportieren

import First from './First'
import Second from './Second'
/..../
export { First, Second }
Igor Dolzhenkov
quelle
2

Für meinen Anwendungsfall benötige ich explizit eine explizite Importanweisung, damit babel meinen es7-Code in es5 transpilieren kann.

Folgendes führt zu einem Fehler You gave us a visitor for the node type "ForAwaitStatement" but it's not a valid type:

require( 'babel-core/register' ); //transpiles es7 to es5
export {default} from './module_name'

Meine Lösung bestand darin, das Modul explizit zu importieren, indem ich Folgendes verwendete require():

require( 'babel-core/register' );
export default require( './module_name' ).default;
Kacy
quelle
-1

Gegeben ./foo.js:

const Foo = class {
  talk() { return 'hello'; }
};

export default Foo;

Dann sollten Sie dazu in der Lage sein:

import Foo from './foo';

let foo = new Foo();

foo.talk(); // => 'hello';

Die Syntax folgt mehr oder weniger dem Muster commonjs module.exports, wo Sie dies tun würden:

const Foo = class {

};

module.exports = Foo;

Mehr hier:

http://exploringjs.com/es6/ch_modules.html

Reiches Apodaca
quelle
Darum ging es bei der Frage nicht ganz?
Dan Dascalescu