快捷導(dǎo)航

JavaScript?中require?和?import區(qū)別及用法示例對(duì)比

更新時(shí)間：2025年09月02日 11:10:45 作者：不穿鎧甲的穿山甲

在JavaScript中,require和import都是用來(lái)導(dǎo)入模塊的語(yǔ)法,但它們屬于不同的模塊系統(tǒng)：CommonJS和ECMAScript Modules（ESM）,這篇文章主要介紹了JavaScript中require和import區(qū)別及用法示例對(duì)比,需要的朋友可以參考下

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

require: 是 CommonJS 的語(yǔ)法，主要用于 Node.js 環(huán)境。
import: 是 ES6 (ECMAScript 2015) 引入的標(biāo)準(zhǔn)模塊系統(tǒng)，廣泛用于現(xiàn)代前端框架（如 React、Vue）和現(xiàn)代瀏覽器。

? 2.加載方式不同

require 是 運(yùn)行時(shí)同步加載 模塊：

const fs = require('fs'); // 同步加載

import 是 編譯時(shí)異步加載 模塊（靜態(tài)導(dǎo)入）：

import fs from 'fs'; // 編譯時(shí)處理

?? 注意：import 也可以使用動(dòng)態(tài)導(dǎo)入（import()）實(shí)現(xiàn)異步加載，返回一個(gè) Promise：

import('fs').then(fs => {
  // 使用 fs
});

? 3.導(dǎo)出語(yǔ)法對(duì)應(yīng)關(guān)系

CommonJS	ES Modules
`module.exports`	`export default`
`exports.xxx`	`export const xxx`
`require()`	`import ... from ...`

? 4.使用環(huán)境不同

語(yǔ)法	Node.js 支持情況	瀏覽器支持情況
`require`	默認(rèn)支持（舊版本）	不支持（需打包工具）
`import`	需設(shè)置 `"type": "module"`	支持（現(xiàn)代瀏覽器）

? 5.示例對(duì)比

?? 文件結(jié)構(gòu)：

math.js
main.js

math.js內(nèi)容：

// CommonJS
exports.add = (a, b) => a + b;
module.exports = { add };
// ES Module
export const add = (a, b) => a + b;
export default { add };

main.js對(duì)比：

使用require:

const math = require('./math');
console.log(math.add(2, 3));

使用import:

import { add } from './math';
console.log(add(2, 3));
// 或者導(dǎo)入默認(rèn)導(dǎo)出
import math from './math';
console.log(math.add(2, 3));

? 6.兼容性與趨勢(shì)

Node.js 從 v12 開(kāi)始支持 ESM，但需要設(shè)置 "type": "module" 或使用 .mjs 擴(kuò)展名。
前端開(kāi)發(fā)推薦使用 import，它是未來(lái)的標(biāo)準(zhǔn)。
require 仍然在很多老項(xiàng)目中使用，尤其是在 Node.js 生態(tài)中。

? 總結(jié)對(duì)比表

特點(diǎn)	`require`	`import`
模塊系統(tǒng)	CommonJS	ES Modules (ES6+)
加載時(shí)機(jī)	運(yùn)行時(shí)同步	編譯時(shí)（靜態(tài)）
是否支持異步	? 不支持	? 支持 (`import()`)
默認(rèn)導(dǎo)出/具名導(dǎo)出	? 支持（需手動(dòng)設(shè)置）	? 天然支持
推薦使用場(chǎng)景	老版 Node.js 項(xiàng)目	現(xiàn)代前端/Node.js ESM 項(xiàng)目

如果你是在寫(xiě)現(xiàn)代項(xiàng)目（如 Vue、React、TypeScript），建議使用 import；如果是維護(hù)舊的 Node.js 項(xiàng)目，則可能繼續(xù)用 require。

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

您可能感興趣的文章: