Node 的 require 與 ES6 的 import/export 之間的區別

---

在使用JavaScript，尤其是在Node.js或現代JavaScript環境中時，您經常會遇到兩種流行的模組系統：使用來自CommonJS的require以及ES6引入的import和export關鍵字。它們都用於模組化程式碼，但使用方法和用途有所不同。現在讓我們更詳細地討論這些差異。

什麼是 Node.js 的 require？

**require**是CommonJS（Node.js的預設模組系統）中的模組載入機制。它允許您將模組、JSON檔案或本地檔案包含到您的應用程式中。

require示例

const fs = require('fs');
const myModule = require('./myModule');

• **同步載入：**這是模組的一個特性，它們是同步載入的，這意味著程式會在載入模組後才會執行下一行程式碼。
• **副檔名靈活性：**在require .js檔案時，您可以省略副檔名，因為Node會自動在末尾新增.js。
• **動態載入：**這意味著所有模組都可以在執行時有條件地載入，以便系統只加載那些仍然相關且有用的部分。

優點

• Node.js開箱即用，一切都很順利。
• 自由靈活，幾乎在任何地方都受支援。

缺點

• 同步載入，在某些情況下可能不太合適。
• 在瀏覽器中不能獨立工作，尤其是在沒有Browserify等工具的瀏覽器中。

什麼是 ES6 的 import 和 export？

ES6模組是進行模組化JavaScript的標準方法。與CommonJS相比，它們具有簡潔的語法和更多功能。

import/export示例

模組：myModule.js

export const greet = () => {
  console.log('Hello, world!');
};

export default function () {
  console.log('Default export function');
}

主檔案

import greetFunction, { greet } from './myModule.js';

greet(); // Hello, world!
greetFunction(); // Default export function

• **非同步載入：**ES6模組是非同步載入的，這使得它們更適合非同步載入。
• **靜態結構：**就import/export而言，它是靜態分析的，因此可以更容易預測。
• **命名匯出和預設匯出：**它支援多個命名匯出，並且只支援一個預設匯出。

優點

• 與最新版本的瀏覽器相容，並提供tree-shaking作為其優勢之一。
• 消除了混亂和重複的程式碼，並增強了程式碼構建詞彙或宣告語句。

缺點

• 需要像Babel這樣的轉譯器或Node.js對舊版本的支援。
• 除非在package.json中指定type: "module"，否則Node.js中的ES6模組需要.mjs副檔名。

主要區別

下表重點突出了Node.js require和ES6 import、export之間的主要區別：

何時使用哪個？

使用 Node.js require

• 在編寫 Node.js 程式碼時，尤其是在處理 Node.js 中的舊程式碼時。
• 如果某些模組必須在執行時之後載入。

使用 ES6 import/export

• 構建現代 JavaScript 應用程式時。
• 對於需要瀏覽器相容性和tree-shaking的專案。

從 require 遷移到 import/export

1. 不要使用 module.exports，而應使用 export default 或 export {}。
2. 將 require() 語句替換為 import 語句。
3. 確保您的專案已配置為 ES6 模組（在 package.json 中使用 type: "module"）。

示例

// Old CommonJS
const math = require('./math');
math.add(2, 3);

// New ES6 Module
import { add } from './math.js';
add(2, 3);

結論

它們都可以有效地處理依賴項並將系統分解成模組，並且它們都是 Go 內建的。儘管 require 是 Node.js 中使用的較舊標準，但它已被 import/export 語句取代，後者在語法、效能和瀏覽器支援方面都更好。

因此，透過比較這些差異，您可以判斷兩者中哪一個更適合您的專案需求。