理解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模組系統提供了一種組織代碼和定義依賴關係的方法。 「匯出預設值」語法可讓您為模組指定單一預設值，以便於在其他模組中匯入。