web-dev-qa-db-ja.com

ES6でインポートしたオブジェクトをエクスポートする方法

ユースケースは簡単です：私はちょうどそれがインポートされたのと同じ名前でオブジェクトをエクスポートしたいです。

例えば：

import React from 'react';
export React;

しかしこれはうまくいきません。私は書く必要があります：

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

しかし、これは変です。これを行う正しい方法は何ですか？

更新：

助けと参照をありがとう。私は多くの手がかりで私の問題を解決しました。私と私の解決策についていくつかの共通の事例を共有したいと思います。

輸出入

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

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

すべての名前付きインポートを再エクスポートする

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

いくつかの名前付きインポートを再エクスポートする

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

デフォルトのインポートをデフォルトのエクスポートとして再エクスポート

export {default} from '...';

デフォルトのインポートをexportという名前で再エクスポートします。

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

私はよくいくつかのファイルを構成するindex.jsファイルで次のことをします。

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

これ ブログエントリ はいくつかの素晴らしい追加の例を提供します。

重要な注意点

これらのエクスポートされたインポートにアクセスするときには、 eslint-rule ということに注意してください。基本的に、別のファイルでは、してはいけません：

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

これをするべきです：

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

このような構造のインポートファイルをエクスポートすることができます

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

export {React}を実行してimport {React} from ./module経由でインポートできるはずです。

詳しくは https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export を参照してください。

0
sheeldotme

これが私のスタティックイメージファイルの整理方法です。 '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;

そしてここが輸入です。

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

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

これが役に立ったことを願っています！

0
R.Cha

私のユースケースでは、babelが私のes7コードをes5に変換できるように、ある種の明示的なimportステートメントが明示的に必要です。

次の結果、エラー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'

私の解決策はrequire()を使ってモジュールを明示的にインポートすることでした：

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

./foo.jsが与えられると：

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

export default Foo;

それからこれをすることができるはずです：

import Foo from './foo';

let foo = new Foo();

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

多かれ少なかれ構文はcommonjs module.exportsパターンに従います。

const Foo = class {

};

module.exports = Foo;

もっとここ：

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

0
Rich Apodaca