[解決済み] ES6+ javascriptモジュールエクスポートオプション
2023-06-14 08:16:15
質問
ES6モジュールのパブリックエクスポートは、以下の両方の方法で行われているのを見たことがあります。
// method 1
export var getAnswer = function () { return 'forty two'; };
// method 2
export default function () { return 'forty two'; };
- どちらも有効ですか?
- もしそうなら、なぜ両方が存在するのでしょうか?
- ES6 構文を使用したモジュールエクスポートのための他の有効なオプションはありますか?
googlefuで答えが見つからなかったので驚いています。 私が心配しているのは だけ ES6 モジュールについてです。 ではなく CommonJS、RequireJS、AMD、Nodeなど。
どのように解決するのですか?
1年と数年後、このテーマについて私が見つけた最高の情報は以下のとおりです。
輸出には4つのタイプがあります。 それぞれの使用例と、それらを使用するいくつかのインポートがあります。
エクスポートの構文
// default exports
export default 42;
export default {};
export default [];
export default (1 + 2);
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}
// variables exports
export var foo = 1;
export var foo = function () {};
export var bar;
export let foo = 2;
export let bar;
export const foo = 3;
export function foo () {}
export class foo {}
// named exports
export {};
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};
// exports from
export * from "foo";
export {} from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";
インポート構文
// default imports
import foo from "foo";
import {default as foo} from "foo";
// named imports
import {} from "foo";
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";
// glob imports
import * as foo from "foo";
// mixing imports
import foo, {baz as xyz} from "foo";
import foo, * as bar from "foo";
// just import
import "foo";
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] git export」(「svn export」のようなもの)を行うか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] 無効になっている入力フィールドの値を送信する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み】ES6での`export const`と`export default`の比較
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?