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 '...';

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

36

Sie können importierte Dateien mit einer solchen Struktur exportieren

import First from './First'
import Second from './Second'
/..../
export { First, Second }

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;

-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


Darum ging es bei der Frage nicht ganz?
— Dan Dascalescu

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.