Comment exporter un objet importé dans ES6?

244

Le cas d'utilisation est simple: je veux juste exporter un objet avec le nom tel qu'il a été importé.

par exemple:

import React from 'react';
export React;

mais cela ne fonctionne pas. Je dois ecrire:

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

Mais c'est étrange. Quel est le bon moyen de le faire?

MISE À JOUR :

Merci pour les aides et les références. J'ai résolu mon problème avec de nombreux indices. Je voudrais partager quelques cas communs pour moi et les solutions.

Exporter les importations

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

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

réexporter toutes les importations nommées

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

réexporter certaines importations nommées

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

réexporter l'importation par défaut en tant qu'exportation par défaut

export {default} from '...';

réexporter l'importation par défaut en tant qu'exportation nommée

export {default as name1} from '...';
import export ecmascript-6 Yao Zhao
la source
pourquoi voudriez-vous exporter réagir?
omarjmh
vous pouvez export {React}mais encore une fois, si vous avez besoin de React quelque part, vous devez simplement l'importer là-bas.
loganfsmyth
2
l'exportation réagit n'est qu'un exemple, en fait, je veux organiser un projet afin que l'utilisateur puisse importer un objet dans un chemin plus court et de haut niveau.
Yao Zhao
Merci beaucoup pour cette mise à jour. Il a résolu tous les problèmes que j'avais avec ES6 / 7. Je vous suggère d'ajouter ceci comme réponse et de l'accepter.
Florian Wendelborn
12
export * as name1 from '...';cela ne fonctionne pas pour moi (en utilisant le webpack 2). Des idées?
Entity Black

Réponses:

131

Je fais souvent ce qui suit dans les fichiers index.js qui composent plusieurs fichiers:

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

Cette entrée de blog fournit de beaux exemples supplémentaires.

Note importante

Vous devez être conscient de cette règle eslint lorsque vous accédez à ces importations exportées. Fondamentalement, dans un autre fichier, vous ne devriez pas:

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

Vous devriez faire ceci:

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

Vous pouvez exporter un fichier importé avec une telle structure

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

Pour mon cas d'utilisation, j'ai explicitement besoin d'une sorte de déclaration d'importation explicite pour que babel puisse transpiler mon code es7 en es5.

Les résultats suivants génèrent une erreur 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'

Ma solution était d'importer explicitement le module en utilisant require():

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

Étant donné ./foo.js:

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

export default Foo;

Vous devriez alors pouvoir faire ceci:

import Foo from './foo';

let foo = new Foo();

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

La syntaxe suit plus ou moins le modèle commonjs module.exports, où vous feriez ceci:

const Foo = class {

};

module.exports = Foo;

Plus ici:

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

Rich Apodaca
la source
Ce n'était pas tout à fait le sujet de la question?
Dan Dascalescu