[解決済み】ES6モジュールで複数のクラスをエクスポートする
2022-04-14 07:32:56
質問
複数のES6クラスをエクスポートするモジュールを作成しようとしています。例えば、以下のようなディレクトリ構造になっているとします。
my/
└── module/
├── Foo.js
├── Bar.js
└── index.js
Foo.js
と
Bar.js
は、それぞれデフォルトの ES6 クラスをエクスポートします。
// Foo.js
export default class Foo {
// class definition
}
// Bar.js
export default class Bar {
// class definition
}
私は現在、自分の
index.js
はこのように設定されています。
import Foo from './Foo';
import Bar from './Bar';
export default {
Foo,
Bar,
}
しかし、インポートすることができません。できるようにしたいのですが、クラスが見つかりません。
import {Foo, Bar} from 'my/module';
ES6モジュールで複数のクラスをエクスポートする正しい方法は何ですか?
どのように解決するのですか?
あなたのコードで試してみてください。
import Foo from './Foo';
import Bar from './Bar';
// without default
export {
Foo,
Bar,
}
ちなみに、こんなやり方もあります。
// bundle.js
export { default as Foo } from './Foo'
export { default as Bar } from './Bar'
export { default } from './Baz'
// and import somewhere..
import Baz, { Foo, Bar } from './bundle'
使用方法
export
export const MyFunction = () => {}
export const MyFunction2 = () => {}
const Var = 1;
const Var2 = 2;
export {
Var,
Var2,
}
// Then import it this way
import {
MyFunction,
MyFunction2,
Var,
Var2,
} from './foo-bar-baz';
との違いは
export default
は、何かをエクスポートして、それをインポートする場所にその名前を適用することができます。
// export default
export default class UserClass {
constructor() {}
};
// import it
import User from './user'
関連
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み] git export」(「svn export」のようなもの)を行うか?
-
[解決済み] ローカルにインストールされたPythonモジュールの一覧を取得するにはどうしたらいいですか?
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み] Node.jsとES6におけるmodule.exportsとexport defaultの比較
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
-
[解決済み] [Solved] ワイルドカードを使って、ディレクトリ内のすべてのファイルからモジュールをインポートすることは可能ですか?
-
[解決済み】インデックスファイルでのES6エクスポート/インポート機能
-
[解決済み】Cloud Functions for Firebaseで複数のファイルから複数の関数をデプロイするための構成は?
-
[解決済み] ES6 オブジェクトからすべての値をエクスポートする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
JSアレイループと効率解析の比較
-
Vue+ElementUIによる大規模なフォームの処理例
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
Vueのクラススタイルの使い方の詳細
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。