Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?

目录

一、为什么需要模块化?

[二、Node.js 的模块化规范](#二、Node.js 的模块化规范)

[三、CommonJS 模块化](#三、CommonJS 模块化)

[1. 基本语法](#1. 基本语法)

[2. 特点](#2. 特点)

[3. 缺点](#3. 缺点)

[四、ES6 模块(ESM)](#四、ES6 模块(ESM))

[1. 基本语法](#1. 基本语法)

[2. 特点](#2. 特点)

[3. 在 Node.js 中的使用](#3. 在 Node.js 中的使用)

[五、CommonJS 和 ES6 模块的区别](#五、CommonJS 和 ES6 模块的区别)

六、实际开发中的选择

七、总结


一、为什么需要模块化?

在没有模块化之前,所有代码都写在一个文件里,项目一旦复杂,就会出现以下问题:

  • 命名冲突:变量和函数容易被覆盖。

  • 代码复用性差:想在另一个项目中复用部分代码不方便。

  • 维护困难:文件过大,难以管理。

因此,模块化的出现就是为了解决 代码拆分、复用、依赖管理 等问题。


二、Node.js 的模块化规范

Node.js 主要支持两种模块化方式:

  1. CommonJS (CJS) ------ Node.js 原生支持的模块规范。

  2. ES Module (ESM) ------ ES6 引入的新标准,Node.js 在 v12+ 开始逐渐支持。

默认情况下,Node.js 使用 CommonJS 作为模块系统,但随着前端 ES6 普及,ESM 也逐渐成为趋势。


三、CommonJS 模块化

1. 基本语法

javascript 复制代码
// 导出
const sum = (a, b) => a + b;
module.exports = sum;

// 导入
const sum = require('./sum.js');
console.log(sum(1, 2)); // 3

2. 特点

  • 同步加载:模块在运行时加载(适合服务端)。

  • 导出的是值拷贝:导出对象被缓存,多次引入不会重复执行模块代码。

  • 动态导入require 可以写在代码的任意位置。

3. 缺点

  • 只能在 Node.js 环境下使用,浏览器默认不支持。

  • 同步加载在浏览器端会影响性能(需要打包工具来解决)。


四、ES6 模块(ESM)

1. 基本语法

javascript 复制代码
// 导出
export const sum = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

// 导入
import multiply, { sum } from './math.js';
console.log(sum(1, 2));       // 3
console.log(multiply(2, 3));  // 6

2. 特点

  • 编译时加载(静态加载):在代码执行前就确定模块依赖关系。

  • 导出的是引用:导出变量值会随时更新。

  • 严格模式 :ESM 默认启用严格模式('use strict')。

  • 只能写在顶层import/export 不能写在 if 或函数里。

3. 在 Node.js 中的使用

在 Node.js 中使用 ESM,需要满足以下条件之一:

  • package.json 中配置 "type": "module"

  • 文件后缀为 .mjs

示例:

javascript 复制代码
// package.json
{
  "type": "module"
}

五、CommonJS 和 ES6 模块的区别

特点 CommonJS (CJS) ES6 Module (ESM)
语法 require / module.exports import / export
加载方式 运行时加载(同步) 编译时加载(静态)
导出值 值拷贝 引用绑定
执行时机 第一次加载时执行并缓存 静态分析阶段确定依赖
使用环境 Node.js 原生支持 浏览器和 Node.js(需配置)
动态导入 支持(require 可写在任意位置) 通过 import() 函数支持

六、实际开发中的选择

  • Node.js 项目:目前大多数依旧采用 CommonJS,但一些新项目已经迁移到 ESM。

  • 前端项目:浏览器环境天然支持 ESM,更加推荐使用 ES6 模块。

  • 混合使用 :如果项目中既有 CommonJS 又有 ESM,可以通过 import()require 来桥接,但推荐统一使用一种。


七、总结

  • CommonJS:Node.js 的传统模块化方案,运行时加载,值拷贝,适合后端。

  • ES6 Module:现代模块化标准,静态分析,引用绑定,更适合前端,也逐渐在 Node.js 中普及。

  • 在长期发展趋势下,ESM 将成为统一标准,未来前后端都会逐步过渡到 ES6 模块化。

相关推荐
qq_1777673740 分钟前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头882143 分钟前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
天人合一peng3 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
方也_arkling4 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐4 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
web打印社区4 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO5 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
Amumu121385 小时前
Vuex介绍
前端·javascript·vue.js
We་ct5 小时前
LeetCode 54. 螺旋矩阵:两种解法吃透顺时针遍历逻辑
前端·算法·leetcode·矩阵·typescript
2601_949480066 小时前
【无标题】
开发语言·前端·javascript