JavaScript 中require 和 import区别及用法示例对比

更新时间：2025年09月02日 11:10:45 作者：不穿铠甲的穿山甲

在JavaScript中,require和import都是用来导入模块的语法,但它们属于不同的模块系统：CommonJS和ECMAScript Modules（ESM）,这篇文章主要介绍了JavaScript中require和import区别及用法示例对比,需要的朋友可以参考下

✅ 1.模块系统不同

require: 是 CommonJS 的语法，主要用于 Node.js 环境。
import: 是 ES6 (ECMAScript 2015) 引入的标准模块系统，广泛用于现代前端框架（如 React、Vue）和现代浏览器。

✅ 2.加载方式不同

require 是 运行时同步加载 模块：

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

import 是 编译时异步加载 模块（静态导入）：

import fs from 'fs'; // 编译时处理

⚠️ 注意：import 也可以使用动态导入（import()）实现异步加载，返回一个 Promise：

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

✅ 3.导出语法对应关系

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

✅ 4.使用环境不同

语法	Node.js 支持情况	浏览器支持情况
`require`	默认支持（旧版本）	不支持（需打包工具）
`import`	需设置 `"type": "module"`	支持（现代浏览器）

✅ 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 扩展名。
前端开发推荐使用 import，它是未来的标准。
require 仍然在很多老项目中使用，尤其是在 Node.js 生态中。

✅ 总结对比表

特点	`require`	`import`
模块系统	CommonJS	ES Modules (ES6+)
加载时机	运行时同步	编译时（静态）
是否支持异步	❌ 不支持	✅ 支持 (`import()`)
默认导出/具名导出	✅ 支持（需手动设置）	✅ 天然支持
推荐使用场景	老版 Node.js 项目	现代前端/Node.js ESM 项目

如果你是在写现代项目（如 Vue、React、TypeScript），建议使用 import；如果是维护旧的 Node.js 项目，则可能继续用 require。

到此这篇关于JavaScript 中require 和 import区别及用法示例对比的文章就介绍到这了,更多相关JavaScript 中require 和 import区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于Css3和JQuery实现打字机效果
最近做项目，有需求实现一个字符逐个出现，类似于打字机效果，于是上网搜了相关资料，接下来，小编就给大家详细介绍基于Css3和JQuery实现打字机效果，需要的朋友可以参考下
2015-08-08
JS+CSS实现电子商务网站导航模板效果代码
这篇文章主要介绍了JS+CSS实现电子商务网站导航模板效果代码,涉及JavaScript结合css动态操作页面元素属性的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-09-09
JavaScript数据结构之链表的实现
链表是一种常见的数据结构。它是动态地进行存储分配的一种结构。本文主要介绍JavaScript数据结构中链表的实现，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
基于函数执行的踩坑(addEventListener)
这篇文章主要介绍了基于函数执行的踩坑(addEventListener)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
键盘KeyCode值列表汇总
这篇文章主要是对键盘KeyCode值进行了详细的汇总，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JSON 数据详解及实例代码分析
这篇文章主要介绍了JSON 数据详解及实例代码分析的相关资料,需要的朋友可以参考下
2017-01-01
WordPress 插件——CoolCode使用方法与下载
本插件原修改自 Chroder.com 的 WordPress Code Highlight 插件。但 CoolCode 插件在它基础上修改了很多的内容。
2007-07-07
JavaScript将字符转换为ASCII码的实现方法
在Web前端开发中,字符编码是处理文本数据时不可或缺的一部分,ASCII是一种广泛使用的字符编码标准,它为每个字符分配了一个唯一的数字表示,解如何将字符转换为ASCII码,对于解析、生成和操作字符串具有重要意义,本文将详细介绍这一过程,并提供多个实用的代码示例
2024-12-12
JavaScript中工厂函数与构造函数示例详解
这篇文章主要给大家介绍了关于JavaScript中工厂函数与构造函数的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
javascript禁止访客复制网页内容的实现代码
这篇文章主要介绍了javascript禁止访客复制网页内容的方法,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08