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

qq_346295272025-05-17 11: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';