CommonJS、ES、包管理器

CMJ 规范：

所有的 js 文件均是一个模块，运行的模块为入口模块
所有的模块中的全局变量、函数，均不会产生污染
当一个模块需要提供一些东西给别的模块使用时，需要把这些东西「导出」
当一个模块需要用到别的模块的东西的时候，需要「导入」（模块路径必须以 ./ 或 ../ 开头）
模块有缓存，第一次运行模块后，导出结果会被缓存，之后再使用该模块，直接使用缓存结果

一、CommonJS 模块

CommonJS 是Node.js 早期的模块化规范，主要为服务端设计，解决了 JavaScript 没有原生模块化的问题。

核心特点与用法

导出（exports/module.exports） ：定义模块对外暴露的内容
导入（require ()） ：加载其他模块

javascript

运行

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

运行

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

运行

csharp 复制代码

# 初始化项目（生成 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

运行

csharp 复制代码

yarn init -y
yarn add axios          # 生产依赖
yarn add -D webpack     # 开发依赖
yarn remove axios
yarn upgrade axios

3. pnpm

新一代包管理器，磁盘占用更少、安装速度更快（采用硬链接 / 符号链接复用包）

核心命令（兼容 npm/yarn）：

bash

运行

csharp 复制代码

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 更推荐新项目使用）。

CommonJS、ES、包管理器

CMJ 规范：

一、CommonJS 模块

核心特点与用法

关键特性

二、ES 模块（ES Modules，简称 ESM）

核心特点与用法

关键特性

CommonJS vs ES 模块 核心区别

三、包管理器

主流包管理器

1. npm（Node Package Manager）

2. yarn

3. pnpm

核心文件说明

总结

CommonJS vs ES 模块核心区别