在 JavaScript 中，require 和 import 都是用于模塊導入的語法，但它們屬于不同的模塊系統(tǒng)，具有顯著的區(qū)別：

1. 模塊系統(tǒng)不同

require

屬于 CommonJS 模塊系統(tǒng)（Node.js 默認使用）。
語法：const module = require(‘./module’)

• 動態(tài)加載：在代碼運行時同步加載模塊。
• 可以導入任何類型的文件（.js、.json 等）。
• 模塊導出是對象（module.exports 或 exports）。

import

屬于 ES6 模塊系統(tǒng)（ECMAScript 2015+ 標準）。
語法：import module from ‘./module.js’

• 靜態(tài)加載：在代碼解析階段（編譯時）確定依賴關(guān)系。
• 默認支持 .js、.mjs 或通過 package.json 的 “type”: “module” 標記的文件。
• 模塊導出是只讀的靜態(tài)綁定（導出值在編譯時確定）。

2. 加載時機

require

• 同步加載：模塊在代碼執(zhí)行到 require 時才會加載，可能阻塞后續(xù)代碼。
• 支持條件導入（如 if (condition) { require(…) }）。

import

• 靜態(tài)加載：模塊依賴在代碼解析階段確定，無法動態(tài)導入（但可通過 import() 動態(tài)導入）。
• 必須寫在頂層作用域（不能在條件語句或函數(shù)內(nèi)使用，除非用 import()）。

3. 語法差異

require

const fs = require('fs'); // 導入整個模塊
const { readFile } = require('fs'); // 解構(gòu)導入

import

import fs from 'fs'; // 默認導入
import { readFile } from 'fs'; // 命名導入
import * as fs from 'fs'; // 導入所有命名導出
import fs from 'fs/promises'; // 導入子模塊（路徑需完整）

4. 動態(tài)導入

require

直接內(nèi)聯(lián)使用，無需額外語法。

import

通過 import() 函數(shù)實現(xiàn)動態(tài)導入（返回 Promise）：

const module = await import('./module.js');

5. 頂層 this 行為

require

模塊中的 this 指向 module.exports。

import

模塊中的 this 是 undefined（嚴格模式）。

6. 使用環(huán)境

require

主要用于 Node.js 環(huán)境（傳統(tǒng)項目），或通過 Babel/Webpack 轉(zhuǎn)譯的瀏覽器代碼。

import

現(xiàn)代瀏覽器原生支持（需聲明 type=“module”），Node.js 從 v12 開始也支持 ES 模塊（需文件后綴 .mjs 或 package.json 配置）。

7. 緩存機制

require

模塊首次加載后會被緩存，后續(xù) require 直接讀取緩存。

import

同樣有緩存，但行為更嚴格（靜態(tài)分析時確定依賴）。

如何選擇？

• Node.js 項目：傳統(tǒng)項目用 require，現(xiàn)代項目可用 import（需配置 “type”: “module”）。
• 瀏覽器項目：優(yōu)先使用 import（配合打包工具如 Webpack/Rollup）。
• 動態(tài)加載：require 更靈活，ES 模塊用 import()。

如果需要兼容性，Babel/TypeScript 可以將 import 轉(zhuǎn)譯為 require。

附：import()函數(shù)適用場合

按需加載，如下 import 模塊在事件監(jiān)聽函數(shù)中，只有用戶點擊了按鈕，才會加載這個模塊。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

條件加載，import() 可以放在 if/else 語句中，實現(xiàn)條件加載。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

總結(jié)

到此這篇關(guān)于JavaScript中require和import有何區(qū)別的文章就介紹到這了,更多相關(guān)js中require和import區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論