CMJ 规范：
- 所有的 js 文件均是一个模块，运行的模块为入口模块
- 所有的模块中的全局变量、函数，均不会产生污染
- 当一个模块需要提供一些东西给别的模块使用时，需要把这些东西「导出」
- 当一个模块需要用到别的模块的东西的时候，需要「导入」（模块路径必须以 ./ 或 ../ 开头）
- 模块有缓存，第一次运行模块后，导出结果会被缓存，之后再使用该模块，直接使用缓存结果
一、CommonJS 模块
CommonJS 是Node.js 早期的模块化规范，主要为服务端设计，解决了 JavaScript 没有原生模块化的问题。
核心特点与用法
- 导出（exports/module.exports） ：定义模块对外暴露的内容
- 导入（require ()） ：加载其他模块
javascript
运行
// 模块文件：math.js (CommonJS 写法)
// 方式1：单个导出
exports.add = (a, b) => a + b;
exports.sub = (a, b) => a - b;
// 方式2：整体导出（更常用）
module.exports = {
add: (a, b) => a + b,
sub: (a, b) => a - b
};
// 导入模块：index.js
const math = require('./math.js');
console.log(math.add(1, 2)); // 输出 3
关键特性
- 同步加载模块（适合服务端，文件读取快）
- 运行时加载（执行到 require 才加载模块）
- 每个模块是独立的作用域，避免全局变量污染
二、ES 模块（ES Modules，简称 ESM）
ES 模块是 ES6 原生支持的模块化规范，目前是浏览器和 Node.js 通用的标准模块化方案。
核心特点与用法
- 导出（export） ：分按需导出、默认导出
- 导入（import） ：分按需导入、默认导入
javascript
运行
// 模块文件：math.js (ES 模块写法)
// 方式1：按需导出
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;
// 方式2：默认导出（一个模块只能有一个默认导出）
export default {
add: (a, b) => a + b,
sub: (a, b) => a - b
};
// 导入模块：index.js
// 按需导入
import { add, sub } from './math.js';
// 默认导入（可自定义名称）
import math from './math.js';
console.log(add(1, 2)); // 输出 3
console.log(math.sub(5, 3)); // 输出 2
关键特性
- 异步加载模块（适合浏览器，避免阻塞渲染）
- 编译时加载（解析阶段就确定依赖，支持树摇优化）
- 需在文件开头声明，或通过
type="module"让浏览器识别（如<script type="module" src="index.js"></script>）
CommonJS vs ES 模块 核心区别
| 特性 | CommonJS | ES 模块 |
|---|---|---|
| 加载时机 | 运行时加载 | 编译时加载 |
| 加载方式 | 同步 | 异步（浏览器）/ 同步 + 异步（Node.js） |
| 导出 / 导入关键字 | module.exports/require | export/import |
| 可修改导出内容 | 可以（动态） | 不可以（静态） |
| 适用环境 | 主要 Node.js | 浏览器 + Node.js（v14+） |
三、包管理器
包管理器是管理 JavaScript 第三方包（模块）的工具，核心功能：下载、安装、更新、卸载包，管理包的版本依赖。
主流包管理器
1. npm（Node Package Manager）
-
Node.js 自带的默认包管理器，生态最丰富
-
核心命令：
bash
运行
# 初始化项目（生成 package.json） npm init -y # 安装包（生产依赖） npm install axios # 安装包（开发依赖） npm install --save-dev webpack # 卸载包 npm uninstall axios # 更新包 npm update axios
2. yarn
-
由 Facebook 开发，解决 npm 早期的性能和依赖一致性问题
-
核心命令（和 npm 基本兼容）：
bash
运行
yarn init -y yarn add axios # 生产依赖 yarn add -D webpack # 开发依赖 yarn remove axios yarn upgrade axios
3. pnpm
-
新一代包管理器，磁盘占用更少、安装速度更快（采用硬链接 / 符号链接复用包）
-
核心命令（兼容 npm/yarn）：
bash
运行
pnpm init -y pnpm add axios pnpm add -D webpack pnpm remove axios pnpm update axios
核心文件说明
package.json：记录项目名称、版本、依赖包等核心信息，是包管理器的核心配置文件package-lock.json/yarn.lock/pnpm-lock.yaml：锁定包的精确版本，保证不同环境安装的依赖版本一致
总结
- CommonJS 是 Node.js 早期模块化规范，用
require/module.exports；ES 模块 是原生标准，用import/export，支持浏览器和现代 Node.js。 - 包管理器（npm/yarn/pnpm）的核心作用是管理第三方模块，解决依赖安装、版本控制问题，其中 npm 生态最广，pnpm 性能最优。
- 实际开发中，Node.js 项目可混用两种模块（需配置），浏览器端优先用 ES 模块，包管理器根据项目需求选择即可（npm 是基础，pnpm 更推荐新项目使用）。
