JavaScript?中require?和?import區(qū)別及用法示例對比
更新時間：2025年09月02日 11:10:45 作者：不穿鎧甲的穿山甲
在JavaScript中,require和import都是用來導入模塊的語法,但它們屬于不同的模塊系統(tǒng)：CommonJS和ECMAScript Modules（ESM）,這篇文章主要介紹了JavaScript中require和import區(qū)別及用法示例對比,需要的朋友可以參考下
在 JavaScript 中，require 和 import 都是用來導入模塊的語法，但它們屬于不同的模塊系統(tǒng)：CommonJS 和 ECMAScript Modules（ESM）。下面是它們之間的主要區(qū)別：
? 1.模塊系統(tǒng)不同
require: 是 CommonJS 的語法，主要用于 Node.js 環(huán)境。import: 是 ES6 (ECMAScript 2015) 引入的標準模塊系統(tǒng)，廣泛用于現(xiàn)代前端框架（如 React、Vue）和現(xiàn)代瀏覽器。
? 2.加載方式不同
require 是 運行時同步加載 模塊：
const fs = require('fs'); // 同步加載import 是 編譯時異步加載 模塊（靜態(tài)導入）：
import fs from 'fs'; // 編譯時處理
?? 注意：import 也可以使用動態(tài)導入（import()）實現(xiàn)異步加載，返回一個 Promise：
import('fs').then(fs => {
// 使用 fs
});? 3.導出語法對應關系
| CommonJS | ES Modules |
|---|---|
module.exports | export default |
exports.xxx | export const xxx |
require() | import ... from ... |
? 4.使用環(huán)境不同
| 語法 | Node.js 支持情況 | 瀏覽器支持情況 |
|---|---|---|
require | 默認支持（舊版本） | 不支持（需打包工具） |
import | 需設置 "type": "module" | 支持（現(xiàn)代瀏覽器） |
? 5.示例對比
?? 文件結構：
math.js main.js
math.js內容：
// CommonJS
exports.add = (a, b) => a + b;
module.exports = { add };
// ES Module
export const add = (a, b) => a + b;
export default { add };main.js對比：
使用require:
const math = require('./math');
console.log(math.add(2, 3));使用import:
import { add } from './math';
console.log(add(2, 3));
// 或者導入默認導出
import math from './math';
console.log(math.add(2, 3));? 6.兼容性與趨勢
- Node.js 從 v12 開始支持 ESM，但需要設置
"type": "module"或使用.mjs擴展名。 - 前端開發(fā)推薦使用
import，它是未來的標準。 require仍然在很多老項目中使用，尤其是在 Node.js 生態(tài)中。
? 總結對比表
| 特點 | require | import |
|---|---|---|
| 模塊系統(tǒng) | CommonJS | ES Modules (ES6+) |
| 加載時機 | 運行時同步 | 編譯時（靜態(tài)） |
| 是否支持異步 | ? 不支持 | ? 支持 (import()) |
| 默認導出/具名導出 | ? 支持（需手動設置） | ? 天然支持 |
| 推薦使用場景 | 老版 Node.js 項目 | 現(xiàn)代前端/Node.js ESM 項目 |
如果你是在寫現(xiàn)代項目（如 Vue、React、TypeScript），建議使用 import；如果是維護舊的 Node.js 項目，則可能繼續(xù)用 require。
到此這篇關于JavaScript 中require 和 import區(qū)別及用法示例對比的文章就介紹到這了,更多相關JavaScript 中require 和 import區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
最近做項目，有需求實現(xiàn)一個字符逐個出現(xiàn)，類似于打字機效果，于是上網(wǎng)搜了相關資料，接下來，小編就給大家詳細介紹基于Css3和JQuery實現(xiàn)打字機效果，需要的朋友可以參考下2015-08-08
JS+CSS實現(xiàn)電子商務網(wǎng)站導航模板效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)電子商務網(wǎng)站導航模板效果代碼,涉及JavaScript結合css動態(tài)操作頁面元素屬性的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-09-09
JavaScript數(shù)據(jù)結構之鏈表的實現(xiàn)
鏈表是一種常見的數(shù)據(jù)結構。它是動態(tài)地進行存儲分配的一種結構。本文主要介紹JavaScript數(shù)據(jù)結構中鏈表的實現(xiàn)，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
基于函數(shù)執(zhí)行的踩坑(addEventListener)
這篇文章主要介紹了基于函數(shù)執(zhí)行的踩坑(addEventListener)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要是對鍵盤KeyCode值進行了詳細的匯總，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了JSON 數(shù)據(jù)詳解及實例代碼分析的相關資料,需要的朋友可以參考下2017-01-01
本插件原修改自 Chroder.com 的 WordPress Code Highlight 插件。但 CoolCode 插件在它基礎上修改了很多的內容。2007-07-07
JavaScript將字符轉換為ASCII碼的實現(xiàn)方法
在Web前端開發(fā)中,字符編碼是處理文本數(shù)據(jù)時不可或缺的一部分,ASCII是一種廣泛使用的字符編碼標準,它為每個字符分配了一個唯一的數(shù)字表示,解如何將字符轉換為ASCII碼,對于解析、生成和操作字符串具有重要意義,本文將詳細介紹這一過程,并提供多個實用的代碼示例2024-12-12
JavaScript中工廠函數(shù)與構造函數(shù)示例詳解
這篇文章主要給大家介紹了關于JavaScript中工廠函數(shù)與構造函數(shù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
javascript禁止訪客復制網(wǎng)頁內容的實現(xiàn)代碼
這篇文章主要介紹了javascript禁止訪客復制網(wǎng)頁內容的方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08