用途: 主要在 Node.js 環境中使用,早期沒有原生的 ES 模組支持時,CommonJS 是主要的模組規範。
語法:
require() 用來引入模組。
module.exports 或 exports 用來導出模組。
加載方式: 同步(Synchronous),在引入模組時會阻塞執行直到模組加載完成。
特點:
主要用於伺服器端,適合需要同步加載的情況。
不支持動態引入(import()),只能靜態引入。
用途: 主要用於瀏覽器端的模組化,尤其是在非同步加載模組的情境下(例如瀏覽器中動態載入腳本)。
語法:
define() 用來定義模組,並可以指定模組的依賴。
依賴是非同步加載的,可以在加載後觸發回調函數。
加載方式: 非同步(Asynchronous),模組是非同步加載的,不會阻塞主執行緒。
特點:
允許模組之間具有依賴關係,並且非同步地解決依賴問題。
主要用途是在瀏覽器環境中動態加載模組。
用途: ES6 引入的標準化模組系統,適用於瀏覽器端和伺服器端(Node.js 14+ 開始支持)。
語法:
import 用來引入模組。
export 用來導出模組。
加載方式:
靜態加載,模組的結構在編譯時就已經確定,這使得它可以進行靜態分析和優化。
支持動態引入,例如使用 import() 函數實現動態模組加載。
模組是按需加載的,可以利用瀏覽器的優化(如按需加載)。
特點:
提供了與語言本身緊密集成的模組機制,是未來 JavaScript 開發的趨勢。
支持靜態分析,有助於樹損(tree shaking)和代碼拆分。