JavaScript 中的 require 與 import

我記得當我開始編碼時，我會看到一些 js 檔案使用 require() 來導入模組，並使用 import 導入其他檔案。這總是讓我感到困惑，因為我並不真正理解其中的差異是什麼，或者為什麼專案之間存在不一致。如果您想知道同樣的事情，請繼續閱讀！

什麼是 CommonJS？

CommonJS 是一組用於在伺服器端 JavaScript（主要是 Node.js 環境）中實作模組的標準。在這個系統中，模組是同步載入的，這意味著腳本執行將被阻塞，直到模組載入為止。這是一種簡單的方法，但缺點是如果您嘗試加載一堆不同的模組，則會影響效能，因為它們必須在其他模組運行之前一個接一個地加載。

使用 CommonJS 時，您可以使用 module.exports 匯出功能並使用 require() 匯入它。

這是程式碼中的範例。

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

什麼是 ECMAScript (ES6)？

ES6，也稱為 ECMAScript，是 2015 年發布的較新版本的 JavaScript。此版本提供了使用導入和匯出語句非同步導入模組的功能。這意味著您正在執行的腳本可以在載入模組時繼續執行，因此不存在瓶頸。這也實現了一種稱為「樹搖動」的效率，我將在後面的文章中介紹這一點，但基本上，這意味著您只從正在使用的模組載入JavaScript，並且不會載入死程式碼（未使用的程式碼）進入瀏覽器。這一切都是可能的，因為 ES6 支援靜態和動態導入。

這是之前的相同範例，但這次我們使用導入和匯出。

// In file multiply.js

export const multiply = (x, y) => x * y;

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

主要區別：require 與 import

require() 是 CommonJS 模組系統的一部分，而 import 是 ES6 模組系統的一部分。您將看到 require() 在 Node.js 環境中用於伺服器端開發，主要是在尚未採用 ES6 的遺留項目上。您將看到 import 在伺服器端和前端開發中使用，尤其是較新的專案以及任何前端框架（如 React 或 Vue）。

為什麼 import 比 require 更好？

正如我們之前提到的，導入是異步的，這可以帶來更好的效能，尤其是在大型應用程式中。此外，由於可以靜態分析導入，因此 linter 和捆綁器等工具可以更有效地優化程式碼並實現樹搖動，從而縮小捆綁包大小並加快載入時間。語法也比 require() 更容易閱讀，這可以帶來更好的開發人員體驗，我們都希望如此！

什麼時候使用 require 和 import

你會在下列情況下使用 require():

• 您正在開發一個舊版 Node.js 項目，該項目在 ES6 發布之前就已啟動且尚未更新。

• 您需要在執行時間動態載入模組，例如在設定檔中，或者如果您需要有條件地載入模組。

您會在下列情況下使用匯入：

• 任何其他時間，因為這是現在的標準並且更有效率。

概括

一般來說，建議盡可能使用 import，因為它提供了更多好處，並且是更新、更廣泛採用的模組系統。但是，在某些情況下，require() 可能仍然是更好的選擇，這取決於您的特定要求和您所在的環境。

如果您覺得這篇文章有幫助，請訂閱我的時事通訊，我將每週將更多類似的內容直接發送到您的收件匣！

以上是JavaScript 中的 require 與 import的詳細內容。更多資訊請關注PHP中文網其他相關文章！