ES6、インポートしたモジュールをどのように1行でエクスポートできますか?


107

私は次のことを望みますが、可能であれば1行で行います。

  • import Module from './Module/Module;
  • export Module;

私は以下を試しましたが、うまくいかないようです:

  • export Module from './Module/Module;

回答:


194
export {default as Module} from './Module/Module';

Moduleエクスポートを行うモジュール内でも使用できる必要がない限り、標準のES6の方法です。

export Module from './Module/Module';

ESnextでこれを行う方法として提案されていますが、それは今のところBabelで有効にした場合にのみ機能します。


それはうまくいきましたが、Webpackはこれを好まないようで、component現在は読み取り専用でホットリロードできないことを通知しています。非常に奇妙な!
16

完璧、これは受け入れられる答えになるはずです。(webpackのホットリロードが適切でない場合は、そのツールまたはHMRプラグインの問題です。)
Benja

18
誰かがそれがどのバベルプラグインか疑問に思っている場合は、export-extensionsここにあります-babeljs.io/docs/plugins/transform-export-extensions
Noitidart

@loganfsmyth上記をデフォルトとしてエクスポートする方法はありますか?
2018

4
@ abhishek-kdm export { default as default } fromまたはexport { default } from
loganfsmyth 2018

24

理由はわかりませんが、これでうまくいきます:

components / index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

私はこのようにエクスポートをインポートします:

import {Component, Component2, Component3, Component4} from '../components';

23

モジュールからすべてを再エクスポートすることもできます:

export * from './Module/Module';

このワイルドカード構文は、名前付きエクスポートのあるファイルでのみ機能します。ファイルにデフォルトのエクスポートが1つしかない場合、「モジュールに名前付きエクスポートが見つかりません」というエラーが表示されます。
dmbaughman

12

React Nativeコンポーネントの場合、この構文は私にとっては機能します。

export {default} from 'react-native-swiper';

これは、インポートされたデフォルトを再エクスポートする場合、React(ネイティブではない)で機能します。私はこれを、「純粋な」コンポーネントにHOCを適用しないindex.jsファイルで使用します
Shiraz

-1

そのため、簡単に参照できるようにディレクトリindex.jsのルートにを置くという即時エクスポート機能では、これが非常にうまく機能することcomponentsがわかりました。

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

を使用する必要がありますmodule.exports


3
これは部分的にCommonJSモジュールであるため、これは具体的にBabelでのみ機能し、サポートがより多くの環境に到達すると実際のES6モジュールで使用しようとすると失敗し、将来のバージョンのバージョンでは機能しなくなる可能性があることに注意してくださいバベル。
loganfsmyth 16

正しい。CommonJSとes6のインポート/エクスポートがBabel 6で混在しているため、中断します。Babel5はこの不正な動作を許可/強化しました。あなたの例でComponentは、はエクスポートされたコンポーネントへの参照ではなくなりますが、代わりにオブジェクトとなり、インスタンス参照が存在しますComponent.default
Scott Silvi

誰も使用せずにこれを行う方法を知っていmodule.exportsますか?一連のコンポーネントをにパッケージ化するこの方法が好きですindex.jsが、構文を理解できません。 import x from 'x'; import y from 'y'; export default {x, y};その後、import {x} from xy;機能しません(そして、なぜ機能しないのかわかりません)
Alex McMillan

2
アレックス、export {x, y}代わりに試しましたか?
jtompl 2017年

この答えはes6ではありません。EcamScript以外のプラットフォームです。-1
レクティッド
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.