web-dev-qa-db-fra.com

Comment exporter un objet importé dans ES6?

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 ça ne marche pas. Je dois ecrire:

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

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

MIS À JOUR:

Merci pour l'aide 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.

importations exportées

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'import par défaut comme export par défaut

export {default} from '...';

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

export {default as name1} from '...';
importexportecmascript-6
146
Yao Zhao

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 quelques exemples supplémentaires intéressants.

Note importante

Vous devez savoir que eslint-rule lorsque vous accédez à ces importations exportées. En gros, 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
76
Eric H.

Vous pouvez exporter le fichier importé avec une telle structure

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

Vous devriez pouvoir faire export {React} et l'importer via import {React} from ./module

Voir https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export pour plus d'informations.

0
sheeldotme

Voici comment j'ai organisé mes fichiers d’image statiques. J'ai créé un nouveau fichier appelé "Directory.js".

const asset = {
    icon: {
        artist: require('./icon/artist.png'),
        artists: require('./icon/artists.png'),
        bookmark: require('./icon/bookmark.png'),
        cameraFlip: require('./icon/camera-flip.png')
    },
    image: {
        color: require('./image/color.png'),
        posting: require('./image/posting.png'),
        newSchool: require('./image/new-school.png'),
        traditional: require('./image/traditional.png')
    }
}

export default asset;

Et voici l'importation.

import asset from './../asset/Directory';

// usage in react native
<Image source={asset.icon.posting} />

J'espère que cela a aidé!

0
R.Cha

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

Les résultats suivants entraînent 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 a été d'importer explicitement le module en utilisant require():

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

./foo.js:

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

export default Foo;

Alors vous devriez 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, dans lequel vous feriez ceci:

const Foo = class {

};

module.exports = Foo;

Plus ici:

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

0
Rich Apodaca