在 JavaScript 中，require 和 import 都是用于模塊導入的語法，但它們屬于不同的模塊系統，具有顯著的區別：
1. 模塊系統不同
require
屬于 CommonJS 模塊系統（Node.js 默認使用）。
語法：const module = require(‘./module’)
- 動態加載：在代碼運行時同步加載模塊。
- 可以導入任何類型的文件（.js、.json 等）。
- 模塊導出是對象（module.exports 或 exports）。
import
屬于 ES6 模塊系統（ECMAScript 2015+ 標準）。
語法：import module from ‘./module.js’
- 靜態加載：在代碼解析階段（編譯時）確定依賴關系。
- 默認支持 .js、.mjs 或通過 package.json 的 “type”: “module” 標記的文件。
- 模塊導出是只讀的靜態綁定（導出值在編譯時確定）。
2. 加載時機
require
- 同步加載：模塊在代碼執行到 require 時才會加載，可能阻塞后續代碼。
- 支持條件導入（如 if (condition) { require(…) }）。
import
- 靜態加載：模塊依賴在代碼解析階段確定，無法動態導入（但可通過 import() 動態導入）。
- 必須寫在頂層作用域（不能在條件語句或函數內使用，除非用 import()）。
3. 語法差異
require
const fs = require('fs'); // 導入整個模塊
const { readFile } = require('fs'); // 解構導入
import
import fs from 'fs'; // 默認導入
import { readFile } from 'fs'; // 命名導入
import * as fs from 'fs'; // 導入所有命名導出
import fs from 'fs/promises'; // 導入子模塊（路徑需完整）
4. 動態導入
require
直接內聯使用，無需額外語法。
import
通過 import() 函數實現動態導入（返回 Promise）：
const module = await import('./module.js');
5. 頂層 this 行為
require
模塊中的 this 指向 module.exports。
import
模塊中的 this 是 undefined（嚴格模式）。
6. 使用環境
require
主要用于 Node.js 環境（傳統項目），或通過 Babel/Webpack 轉譯的瀏覽器代碼。
import
現代瀏覽器原生支持（需聲明 type=“module”），Node.js 從 v12 開始也支持 ES 模塊（需文件后綴 .mjs 或 package.json 配置）。
7. 緩存機制
require
模塊首次加載后會被緩存，后續 require 直接讀取緩存。
import
同樣有緩存，但行為更嚴格（靜態分析時確定依賴）。
如何選擇？
- Node.js 項目：傳統項目用 require，現代項目可用 import（需配置 “type”: “module”）。
- 瀏覽器項目：優先使用 import（配合打包工具如 Webpack/Rollup）。
- 動態加載：require 更靈活，ES 模塊用 import()。
如果需要兼容性，Babel/TypeScript 可以將 import 轉譯為 require。
