JavaScript の「デフォルトのエクスポート」を理解する

最新の JavaScript フレームワークはモジュールの概念に大きく依存しており、その中には「デフォルトのエクスポート」があります。は重要な機能です。その機能を詳しく調べるために、実際の例を詳しく見てみましょう:

ファイル SafeString.js 内の次のコード スニペットを検討してください:

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return ""   this.string;
};

// Unfamiliar Syntax:
export default SafeString;

質問: この文脈での「デフォルトのエクスポート」とは何を意味しますか?

回答: 「デフォルトのエクスポート」は一部ですモジュールが単一のデフォルト値をエクスポートできるようにする ES6 モジュール システムの。この場合、SafeString クラスがこのモジュールのデフォルトのエクスポートとして利用可能になります。

簡単な説明:

値をデフォルトとしてエクスポートすると、インポートできます。名前付きエクスポートを明示的に指定せずに、他のモジュールでそれを実行します。代わりに、次のように単純にインポートできます:

// Example in another module
import SafeString from './SafeString.js' // Assuming you have an appropriate import statement
let mySafeString = new SafeString('Hello, world!');
console.log(mySafeString); // Output: Hello, world!

SafeString クラスはデフォルトのエクスポートとしてインポートされ、インポート ステートメントに中かっこを必要とせずにアクセスできるようになります。

追加の注意:

ES6 モジュール システムは、コードを編成し、依存関係を定義する方法を提供します。 「デフォルトのエクスポート」構文を使用すると、モジュールに単一のデフォルト値を指定できるため、他のモジュールにインポートするのに便利です。