JavaScript 模块化详解：CommonJS、AMD、UMD 与 ES 模块

博主： leesong
发布时间：2024 年 12 月 28 日
42 次浏览
暂无评论
8108字数
分类：学习记录

模块化是现代 JavaScript 开发的核心理念之一，它极大地提高了代码的组织性、可维护性和可复用性。在 JavaScript 的发展过程中，出现了多种模块化规范，每种规范都有其独特的背景和应用场景。本文将从以下四种模块化规范入手：CommonJS、AMD、UMD 和 ES 模块，分别介绍它们的含义、用途、区别与联系，并详细说明如何在实际开发中使用它们。

---

## 一、模块化规范的含义与用途

### **CommonJS**

#### 含义

CommonJS 是一种模块化规范，最早应用于服务端 JavaScript 环境（如 Node.js）。它的目标是为 JavaScript 提供一种简单、同步的模块加载方式。通过将模块封装在文件中，开发者可以避免全局变量污染，并且可以在不同文件间共享代码。

#### 用途

+ 服务端开发：Node.js 默认使用 CommonJS 模块化规范，是服务端 JavaScript 的基础。
+ 小型前端项目：通过打包工具（如 Browserify 或 Webpack）可以兼容浏览器环境使用 CommonJS。

#### 特点

+ **同步加载**：模块加载是同步的，这在服务端环境中表现出色，因为文件系统的读取速度较快。
+ **一次加载，永久缓存**：模块只会加载一次，后续引用直接返回缓存结果，从而提升性能。
+ **模块作用域**：每个文件都是一个独立的模块，变量不会污染全局作用域。

### **AMD（Asynchronous Module Definition）**

#### 含义

AMD 是一种专为浏览器环境设计的模块化规范，旨在解决异步加载模块的需求。在早期的 JavaScript 开发中，脚本的依赖管理和加载顺序是一个棘手的问题，AMD 提供了显式的依赖声明和模块加载机制，解决了这一痛点。

#### 用途

+ 浏览器环境中异步加载模块，避免阻塞页面渲染。
+ 依赖较多、需要按需加载的前端项目，特别是在单页应用和复杂的 UI 项目中。

#### 特点

+ **异步加载**：模块的加载和执行是异步的，能够提高页面的响应速度。
+ **显式依赖声明**：模块在定义时必须显式声明其依赖，这使得依赖关系清晰明了。
+ **支持浏览器直接使用**：无需打包工具即可运行，非常适合早期的前端开发需求。

### **UMD（Universal Module Definition）**

#### 含义

UMD 是为了解决模块化规范在不同运行环境下的兼容性问题而提出的一种通用规范。它结合了 CommonJS 和 AMD 的优点，同时兼容浏览器全局变量，使得开发者可以在各种环境下无缝使用模块。

#### 用途

+ 构建跨环境的 JavaScript 库，如需要兼容浏览器、Node.js 和全局变量环境的工具库。
+ 提供向下兼容的解决方案，方便在老旧项目中使用现代模块化工具。

#### 特点

+ **通用性**：UMD 模块可以在不同环境下运行，无需修改代码。
+ **动态环境适配**：模块会根据当前运行环境（浏览器或 Node.js）动态选择加载方式。
+ **易于整合**：适合开发兼容性要求高的 JavaScript 库。

### **ES 模块（ESM）**

#### 含义

ES 模块是 JavaScript 的官方模块化规范，从 ES6（ECMAScript 2015）开始成为标准，并逐渐成为现代 JavaScript 的主流模块化方式。它由浏览器和 Node.js 原生支持，提供了一种高效、简洁的模块化开发方法。

#### 用途

+ 现代前端与后端项目的模块化开发，例如 React、Vue、Node.js 项目。
+ 构建工具支持 Tree Shaking 等高级优化，提升打包效率和代码质量。

#### 特点

+ **静态分析**：模块依赖关系在编译时即可确定，有助于优化和错误检测。
+ **支持异步加载**：通过动态 `import()` 方法可以实现按需加载。
+ **浏览器原生支持**：现代浏览器直接支持 ES 模块，无需额外的打包工具。

---

## 二、规范之间的区别与联系

### 区别

| 特性         | CommonJS         | AMD         | UMD          | ES 模块            |
| ------------ | ---------------- | ----------- | ------------ | ------------------ |
| 加载方式     | 同步加载         | 异步加载    | 动态适配环境 | 支持静态与异步加载 |
| 适用场景     | 服务端开发       | 浏览器开发  | 通用库开发   | 现代前端与后端开发 |
| 模块导出语法 | `module.exports` | `define()`  | 通用模板     | `export`           |
| 模块导入语法 | `require()`      | `require()` | 通用模板     | `import`           |

### 联系

1. **共同目标**：
   所有模块化规范的核心目标都是解决代码组织、依赖管理和模块复用问题。
2. **逐步发展**：
   - CommonJS 是最早的模块化规范，为服务端开发奠定了基础。
   - AMD 针对浏览器环境，解决了异步加载的需求。
   - UMD 提供了兼容性方案，适应不同运行环境。
   - ES 模块成为现代开发的标准，逐渐替代其他规范。

---

## 三、模块化规范的使用方法与场景

### **CommonJS 的使用方法与场景**

#### **导出模块**

CommonJS 提供了两种方式来导出模块：

+ **使用**`module.exports`：导出单一对象、函数或类。
+ **使用**`exports`：导出多个成员（`exports` 是 `module.exports` 的引用）。

**示例：**

```javascript
// utils.js
module.exports = function add(a, b) {
  return a + b;
};

// math.js
exports.subtract = function (a, b) {
  return a - b;
};

exports.multiply = function (a, b) {
  return a * b;
};
```

#### **导入模块**

使用 `require()` 引入其他模块，路径可以是相对路径或 Node.js 核心模块名称。

**示例：**

```javascript
// app.js
const add = require('./utils'); // 导入 utils.js 的默认导出
const math = require('./math'); // 导入 math.js 的所有导出

console.log(add(2, 3));          // 输出：5
console.log(math.subtract(5, 3)); // 输出：2
console.log(math.multiply(4, 3)); // 输出：12
```

#### **组合导出和导入**

你可以将模块进行重新组合并导出为一个新的模块：

```javascript
// add.js
module.exports = (a, b) => a + b;

// subtract.js
module.exports = (a, b) => a - b;

// index.js (组合导出)
const add = require('./add');
const subtract = require('./subtract');

module.exports = {
    add,
    subtract
};

// 使用
const math = require('./index');
console.log(math.add(5, 3));       // 输出：8
console.log(math.subtract(10, 4)); // 输出：6
```

#### 使用场景

+ Node.js 服务端项目。
+ 简单前端项目，通过工具（如 Browserify）将 CommonJS 转换为浏览器可用的代码。

---

### 2. **AMD 的使用方法与场景**

#### 基本使用方法

+ **定义模块**：

```javascript
// math.js
define(['dependency1', 'dependency2'], function(dep1, dep2) {
  return {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
  };
});
```

+ **使用模块**：

```javascript
// app.js
require(['math'], function(math) {
  console.log(math.add(2, 3)); // 输出 5
});
```

#### 特性使用方法

+ **动态依赖加载**：

```javascript
require(['moduleA', 'moduleB'], function(moduleA, moduleB) {
  console.log(moduleA.someFunction());
  console.log(moduleB.someOtherFunction());
});
```

+ **配置路径**：

```javascript
require.config({
  baseUrl: 'scripts',
  paths: {
    jquery: 'libs/jquery.min'
  }
});

require(['jquery'], function($) {
  console.log('jQuery loaded:', $);
});
```

#### 使用场景

+ 前端开发中需要按需加载模块的场景。
+ 使用 RequireJS 管理模块依赖。

---

### 3. **UMD 的使用方法与场景**

#### 基本使用方法

+ **定义模块**：

```javascript
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD 模式
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS 模式
    module.exports = factory();
  } else {
    // 浏览器全局变量模式
    root.myLibrary = factory();
  }
})(this, function() {
  return {
    hello: function() {
      return 'Hello, world!';
    },
  };
});
```

#### 特性使用方法

+ **支持多环境加载**：

```javascript
(function(global, factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    global.myModule = factory();
  }
})(this, function() {
  return {
    greet: () => console.log('Hi from UMD!')
  };
});
```

#### 使用场景

+ 开发兼容浏览器和 Node.js 的通用库。
+ 构建需要支持多种模块化规范的工具。

---

### 4. **ES 模块的使用方法与场景**

#### **命名导出 (**`export`**)**

命名导出允许从模块中导出多个标识符，使用时需要通过指定的名称导入。

**示例：**

```javascript
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// 导入
import { add, subtract } from './math.js';
console.log(add(5, 3));       // 输出：8
console.log(subtract(9, 4)); // 输出：5
```

#### **默认导出 (**`export default`**)**

默认导出允许模块导出一个主功能，在导入时可以自定义名称。

**示例：**

```javascript
// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// 导入
import greet from './greet.js';
console.log(greet('Alice')); // 输出：Hello, Alice!
```

#### **混合导出**

一个模块中可以同时使用命名导出和默认导出。

**示例：**

```javascript
// utils.js
export const version = '1.0.0';
export default function hello() {
  return 'Hello, World!';
}

// 导入
import hello, { version } from './utils.js';
console.log(hello());    // 输出：Hello, World!
console.log(version);    // 输出：1.0.0
```

#### **完全导入**

使用 `*` 将整个模块作为一个对象导入，适合需要访问模块中多个导出内容时。

**示例：**

```javascript
// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// 导入
import * as math from './math.js';
console.log(math.add(2, 3));       // 输出：5
console.log(math.multiply(4, 5)); // 输出：20
```

#### **部分导入**

只导入需要的部分，提高代码清晰度。

**示例：**

```javascript
import { add } from './math.js';
console.log(add(2, 3)); // 输出：5
```

#### **重命名导入**

在导入时可以为标识符指定别名。

**示例：**

```javascript
import { add as addition } from './math.js';
console.log(addition(2, 3)); // 输出：5
```

#### **动态导入**

通过 `import()` 方法按需加载模块，返回一个 `Promise`，适合动态场景或代码分割。

**示例：**

```javascript
if (someCondition) {
  import('./math.js').then(math => {
    console.log(math.add(2, 3)); // 输出：5
  });
}
```

#### **在浏览器中使用 ES 模块**

浏览器原生支持 ES 模块，需要通过 `<script type="module">` 声明。

```javascript

<script type="module">
    import { add } from './math.js';
    console.log(add(3, 4)); // 输出：7
</script>

```

#### **在 Node.js 中使用 ES 模块**

Node.js 通过 `.mjs` 扩展名或在 `package.json` 中配置 `type: "module"` 支持 ES 模块。

**示例 1：使用**`.mjs`

```javascript
// math.mjs
export const add = (a, b) => a + b;

// app.mjs
import { add } from './math.mjs';
console.log(add(3, 4)); // 输出：7
```

运行方式：

```bash
node app.mjs
```

**示例 2：使用 **`package.json`** 配置**

```json
{
  "type": "module"
}
```

使用 `.js` 文件时也能支持 ES 模块。

#### 使用场景

+ 现代前端项目（React、Vue 等）。
+ 使用工具（如 Webpack、Rollup）打包的复杂项目。
+ 浏览器和服务端同时支持的环境。

最后修改：2024 年 12 月 28 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Frp实现远程桌面连接 - 黑羽
[...]前言frp 是一个可用于内网穿透的高性能的反向代理应...
bozhi
感谢！
frp实现远程桌面连接 - Lumine
[...]前言frp 是一个可用于内网穿透的高性能的反向代理应...
王建辉
你好s啊
Typecho
欢迎加入 Typecho 大家族

JavaScript 模块化详解：CommonJS、AMD、UMD 与 ES 模块

leesong • 2024 年 12 月 28 日

---

## 一、模块化规范的含义与用途

### **CommonJS**

#### 含义

#### 用途

#### 特点

### **AMD（Asynchronous Module Definition）**

#### 含义

#### 用途

+ 浏览器环境中异步加载模块，避免阻塞页面渲染。
+ 依赖较多、需要按需加载的前端项目，特别是在单页应用和复杂的 UI 项目中。

#### 特点

### **UMD（Universal Module Definition）**

#### 含义

#### 用途

#### 特点

### **ES 模块（ESM）**

#### 含义

#### 用途

+ 现代前端与后端项目的模块化开发，例如 React、Vue、Node.js 项目。
+ 构建工具支持 Tree Shaking 等高级优化，提升打包效率和代码质量。

#### 特点

---

## 二、规范之间的区别与联系

### 区别

### 联系

---

## 三、模块化规范的使用方法与场景

### **CommonJS 的使用方法与场景**

#### **导出模块**

CommonJS 提供了两种方式来导出模块：

+ **使用**`module.exports`：导出单一对象、函数或类。
+ **使用**`exports`：导出多个成员（`exports` 是 `module.exports` 的引用）。

**示例：**

```javascript
// utils.js
module.exports = function add(a, b) {
  return a + b;
};

// math.js
exports.subtract = function (a, b) {
  return a - b;
};

exports.multiply = function (a, b) {
  return a * b;
};
```

#### **导入模块**

使用 `require()` 引入其他模块，路径可以是相对路径或 Node.js 核心模块名称。

**示例：**

```javascript
// app.js
const add = require('./utils'); // 导入 utils.js 的默认导出
const math = require('./math'); // 导入 math.js 的所有导出

console.log(add(2, 3));          // 输出：5
console.log(math.subtract(5, 3)); // 输出：2
console.log(math.multiply(4, 3)); // 输出：12
```

#### **组合导出和导入**

你可以将模块进行重新组合并导出为一个新的模块：

```javascript
// add.js
module.exports = (a, b) => a + b;

// subtract.js
module.exports = (a, b) => a - b;

// index.js (组合导出)
const add = require('./add');
const subtract = require('./subtract');

module.exports = {
    add,
    subtract
};

// 使用
const math = require('./index');
console.log(math.add(5, 3));       // 输出：8
console.log(math.subtract(10, 4)); // 输出：6
```

#### 使用场景

+ Node.js 服务端项目。
+ 简单前端项目，通过工具（如 Browserify）将 CommonJS 转换为浏览器可用的代码。

---

### 2. **AMD 的使用方法与场景**

#### 基本使用方法

+ **定义模块**：

```javascript
// math.js
define(['dependency1', 'dependency2'], function(dep1, dep2) {
  return {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
  };
});
```

+ **使用模块**：

```javascript
// app.js
require(['math'], function(math) {
  console.log(math.add(2, 3)); // 输出 5
});
```

#### 特性使用方法

+ **动态依赖加载**：

```javascript
require(['moduleA', 'moduleB'], function(moduleA, moduleB) {
  console.log(moduleA.someFunction());
  console.log(moduleB.someOtherFunction());
});
```

+ **配置路径**：

```javascript
require.config({
  baseUrl: 'scripts',
  paths: {
    jquery: 'libs/jquery.min'
  }
});

require(['jquery'], function($) {
  console.log('jQuery loaded:', $);
});
```

#### 使用场景

+ 前端开发中需要按需加载模块的场景。
+ 使用 RequireJS 管理模块依赖。

---

### 3. **UMD 的使用方法与场景**

#### 基本使用方法

+ **定义模块**：

#### 特性使用方法

+ **支持多环境加载**：

#### 使用场景

+ 开发兼容浏览器和 Node.js 的通用库。
+ 构建需要支持多种模块化规范的工具。

---

### 4. **ES 模块的使用方法与场景**

#### **命名导出 (**`export`**)**

命名导出允许从模块中导出多个标识符，使用时需要通过指定的名称导入。

**示例：**

```javascript
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// 导入
import { add, subtract } from './math.js';
console.log(add(5, 3));       // 输出：8
console.log(subtract(9, 4)); // 输出：5
```

#### **默认导出 (**`export default`**)**

默认导出允许模块导出一个主功能，在导入时可以自定义名称。

**示例：**

```javascript
// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// 导入
import greet from './greet.js';
console.log(greet('Alice')); // 输出：Hello, Alice!
```

#### **混合导出**

一个模块中可以同时使用命名导出和默认导出。

**示例：**

```javascript
// utils.js
export const version = '1.0.0';
export default function hello() {
  return 'Hello, World!';
}

// 导入
import hello, { version } from './utils.js';
console.log(hello());    // 输出：Hello, World!
console.log(version);    // 输出：1.0.0
```

#### **完全导入**

使用 `*` 将整个模块作为一个对象导入，适合需要访问模块中多个导出内容时。

**示例：**

```javascript
// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// 导入
import * as math from './math.js';
console.log(math.add(2, 3));       // 输出：5
console.log(math.multiply(4, 5)); // 输出：20
```

#### **部分导入**

只导入需要的部分，提高代码清晰度。

**示例：**

```javascript
import { add } from './math.js';
console.log(add(2, 3)); // 输出：5
```

#### **重命名导入**

在导入时可以为标识符指定别名。

**示例：**

```javascript
import { add as addition } from './math.js';
console.log(addition(2, 3)); // 输出：5
```

#### **动态导入**

通过 `import()` 方法按需加载模块，返回一个 `Promise`，适合动态场景或代码分割。

**示例：**

```javascript
if (someCondition) {
  import('./math.js').then(math => {
    console.log(math.add(2, 3)); // 输出：5
  });
}
```

#### **在浏览器中使用 ES 模块**

浏览器原生支持 ES 模块，需要通过 `<script type="module">` 声明。

```javascript

<script type="module">
    import { add } from './math.js';
    console.log(add(3, 4)); // 输出：7
</script>

```

#### **在 Node.js 中使用 ES 模块**

Node.js 通过 `.mjs` 扩展名或在 `package.json` 中配置 `type: "module"` 支持 ES 模块。

**示例 1：使用**`.mjs`

```javascript
// math.mjs
export const add = (a, b) => a + b;

// app.mjs
import { add } from './math.mjs';
console.log(add(3, 4)); // 输出：7
```

运行方式：

```bash
node app.mjs
```

**示例 2：使用 **`package.json`** 配置**

```json
{
  "type": "module"
}
```

使用 `.js` 文件时也能支持 ES 模块。

#### 使用场景

+ 现代前端项目（React、Vue 等）。
+ 使用工具（如 Webpack、Rollup）打包的复杂项目。
+ 浏览器和服务端同时支持的环境。

JavaScript 模块化详解：CommonJS、AMD、UMD 与 ES 模块

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Docker 安装配置宝塔面板

淘宝镜像报错npm ERR!

SPA和MPA

Vue的核心特性

物理机Esxi 6.7安装教程

koa2使用oracledb连接Oracle 11G数据库

Linux安装与卸载git

拉普拉斯平滑

Koa2中处理异步操作

Chrome默认非安全端口

JavaScript 模块化详解：CommonJS、AMD、UMD 与 ES 模块

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript 模块化详解：CommonJS、AMD、UMD 与 ES 模块

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款