当前位置：首页 > news >正文

require/exports 或 import/export的联系和区别，各自的使用场景

news 来源：原创 2025/5/17 5:42:29

以下是 require/exports（CommonJS）与 import/export（ES6 Modules）的对比分析及使用场景说明：
一、核心联系‌
‌模块化目标‌
两者都用于实现代码模块化，解决全局作用域污染和依赖管理问题。
‌跨环境适配‌
可通过工具（如 Babel、Webpack）相互转换，兼容不同运行环境。
区别：

在这里插入图片描述
‌三、使用场景‌
‌1. require/exports（CommonJS）‌
‌Node.js 后端开发‌：原生支持，无需编译12。
‌动态依赖加载‌：需根据条件动态导入模块的代码逻辑4。
‌旧项目维护‌：基于 CommonJS 的传统项目或库

// 导出
exports.add = (a, b) => a + b;
// 或
module.exports = { add };// 导入
const utils = require('./utils');
utils.add(2, 3);

import/export（ES6 Modules）‌
‌现代前端框架‌（React/Vue）：与构建工具链深度集成。
‌浏览器原生模块‌：通过 <script type="module"> 直接使用。
‌静态优化需求‌：需 Tree Shaking 移除未使用代码。

// 导出（具名导出 + 默认导出）
export const multiply = (a, b) => a * b;
export default function div(a, b) { return a / b; }// 导入
import { multiply } from './math.js';
import div from './math.js';