JavaScript 中require 和 import区别及用法示例对比
更新时间：2025年09月02日 11:10:45 作者：不穿铠甲的穿山甲
在JavaScript中,require和import都是用来导入模块的语法,但它们属于不同的模块系统：CommonJS和ECMAScript Modules（ESM）,这篇文章主要介绍了JavaScript中require和import区别及用法示例对比,需要的朋友可以参考下
在 JavaScript 中，require 和 import 都是用来导入模块的语法，但它们属于不同的模块系统：CommonJS 和 ECMAScript Modules（ESM）。下面是它们之间的主要区别：
✅ 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区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了前端截图几种常用实现方式,包括使用HTML5的canvas和html2canvas库、浏览器API以及结合后端服务,每种方法都有其优缺点,大家可以根据需求选择方法,需要的朋友可以参考下2025-03-03
javascript数组使用调用方法汇总...2007-12-12
JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并且探讨下JSONP跨域的原理2014-03-03
这篇文章主要为大家详细介绍了JS实现音乐钢琴特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
这篇文章主要为大家详细介绍了JavaScript运动框架的第二部分，解决防抖动问题、悬浮对联问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了原生js实现弹窗拖拽代码demo，以及在实现js弹窗拖拽效果需要注意的事项，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了JavaScript常见鼠标事件与用法,结合实例形式较为详细的分析了javascript 8种常见的鼠标事件与相关使用技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了JavaScript如何将数据处理成树形结构问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了js实现图片上传即时显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
javascript中reduce和reduceRight的区别
reduce和reduceRight都是JavaScript中用于遍历数组并累积结果的方法,本文主要介绍了javascript中reduce和reduceRight的区别,具有一定的参考价值,感兴趣的可以了解一下2025-05-05
最新评论