MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript模块化开发：CommonJS与ES6 Modules

2021-05-216.1k 阅读

JavaScript模块化开发概述

在JavaScript的发展历程中，模块化开发逐渐成为构建大型应用程序不可或缺的一部分。早期的JavaScript主要用于简单的网页交互，代码量较小，通常将所有代码写在一个文件中即可满足需求。然而，随着Web应用的复杂性不断增加，代码的规模和耦合度也随之上升，这种传统的开发方式开始暴露出诸多问题，例如命名冲突、依赖管理困难以及代码维护成本高等。

模块化开发通过将代码分割成独立的模块，每个模块负责特定的功能，使得代码结构更加清晰，易于维护和扩展。每个模块都有自己独立的作用域，避免了全局变量的污染，不同模块之间通过特定的接口进行交互，从而有效管理代码的依赖关系。

CommonJS规范

1. 起源与背景

CommonJS是JavaScript在服务器端的模块化规范，最初由Node.js采用并推广。在Node.js出现之前，JavaScript主要运行在浏览器环境中，缺乏一个统一的模块化标准。Node.js作为一个基于Chrome V8引擎的JavaScript运行时，为服务器端JavaScript开发提供了强大的支持，而CommonJS规范则为Node.js中的模块管理提供了一套可行的方案。

2. 模块定义

在CommonJS中，一个文件就是一个模块。每个模块都有自己独立的作用域，模块内部定义的变量、函数等默认是私有的，不会污染全局作用域。通过exports或module.exports对象来暴露模块的接口。

// 定义一个简单的CommonJS模块
// 文件名：math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

// 通过exports暴露接口
exports.add = add;
exports.subtract = subtract;

// 或者使用module.exports
// module.exports = {
//     add: add,
//     subtract: subtract
// };

上述代码定义了一个math.js模块，包含两个函数add和subtract，并通过exports对象将这两个函数暴露出去，使得其他模块可以使用这些功能。

3. 模块引用

在CommonJS中，使用require函数来引用其他模块。require函数接受一个模块标识符作为参数，该标识符通常是模块的文件名（不包含文件扩展名）或者是一个在Node.js的模块搜索路径中的模块名。

// 文件名：main.js
const math = require('./math');

const result1 = math.add(5, 3);
const result2 = math.subtract(5, 3);

console.log(`加法结果: ${result1}`);
console.log(`减法结果: ${result2}`);

在main.js中，通过require('./math')引入了math.js模块，并使用该模块中暴露的add和subtract函数进行计算。

4. 模块加载机制

CommonJS采用同步阻塞的模块加载机制。当使用require加载一个模块时，Node.js会暂停当前模块的执行，去查找并加载指定的模块，直到被加载的模块执行完毕并返回导出的内容后，才会继续执行当前模块。这种机制在服务器端环境中是可行的，因为服务器端的模块通常是本地文件系统中的文件，加载速度相对较快，并且不会阻塞I/O操作。

5. 优点与局限性

优点：

  • 简单易懂：CommonJS的模块定义和引用方式非常直观，易于理解和上手，对于初学者来说门槛较低。
  • 广泛应用于Node.js：由于Node.js采用了CommonJS规范，使得基于Node.js的生态系统得到了极大的发展，大量的第三方模块都遵循这一规范，方便开发者进行集成和使用。

局限性：

  • 同步阻塞加载：在浏览器环境中，同步阻塞的加载方式会导致页面渲染阻塞，影响用户体验。因为浏览器需要从网络中获取模块文件，网络延迟可能会导致较长的等待时间。
  • 不适合浏览器端的按需加载：在浏览器中，可能需要根据用户的操作或页面的状态按需加载某些模块，而CommonJS的同步加载方式难以满足这种需求。

ES6 Modules

1. 规范诞生

ES6（ECMAScript 2015）引入了官方的模块系统，为JavaScript在浏览器和服务器端提供了统一的模块化解决方案。ES6 Modules旨在解决CommonJS在浏览器环境中的局限性，同时提供更加简洁和强大的模块化语法。

2. 模块定义

ES6 Modules使用export关键字来暴露模块的接口。可以有多种导出方式，包括命名导出和默认导出。

命名导出：

// 文件名：utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}

export const version = '1.0';

在上述utils.js模块中，通过export关键字分别导出了greet函数和version常量。

默认导出：

// 文件名：message.js
const message = 'This is a default message';
export default message;

这里使用export default导出了一个默认值，每个模块只能有一个默认导出。

3. 模块引用

ES6 Modules使用import关键字来引用其他模块。对于命名导出的模块，需要使用花括号来指定要导入的内容；对于默认导出的模块，可以直接使用自定义的名称进行导入。

导入命名导出的模块：

// 文件名：main.js
import { greet, version } from './utils.js';

console.log(greet('John'));
console.log(`Version: ${version}`);

导入默认导出的模块：

// 文件名：main.js
import msg from './message.js';

console.log(msg);

也可以同时导入默认导出和命名导出：

// 文件名：main.js
import msg, { greet, version } from './utils.js';

console.log(msg);
console.log(greet('Jane'));
console.log(`Version: ${version}`);

4. 模块加载机制

ES6 Modules在浏览器中采用异步加载的方式，不会阻塞页面的渲染。当浏览器解析到import语句时，会异步地去获取模块文件，在下载模块文件的同时，页面可以继续进行其他渲染操作。并且，ES6 Modules具有静态分析的能力，在编译阶段就能确定模块的依赖关系，这使得诸如Tree - shaking（摇树优化，去除未使用的代码）等优化技术成为可能。

5. 循环引用处理

在CommonJS中，处理循环引用相对复杂，因为它是同步加载，当出现循环引用时，可能会导致模块导出不完全。而ES6 Modules在处理循环引用时更加优雅，由于其静态分析和异步加载的特性，在循环引用的情况下，模块会按照定义的顺序进行加载和执行，确保每个模块都能正确导出。

例如，假设有两个模块a.js和b.js存在循环引用：

// a.js
import { bFunction } from './b.js';

export function aFunction() {
    return `aFunction: ${bFunction()}`;
}

// b.js
import { aFunction } from './a.js';

export function bFunction() {
    return `bFunction: ${aFunction()}`;
}

在ES6 Modules中，这种循环引用能够被正确处理，因为模块的加载和执行是异步且按顺序进行的。

6. 优点

  • 异步加载：适合浏览器环境，不会阻塞页面渲染，提高了用户体验。
  • 静态分析：支持Tree - shaking等优化技术，能够有效减小打包后的代码体积，提高应用的性能。
  • 统一的语法：为浏览器和服务器端提供了统一的模块化语法，便于代码的迁移和维护。

CommonJS与ES6 Modules的比较

1. 语法差异

  • CommonJS：使用exports或module.exports导出模块接口，require函数导入模块，语法相对较为命令式。
  • ES6 Modules：使用export关键字导出，import关键字导入，语法更加声明式，并且提供了默认导出和命名导出等灵活的方式。

2. 加载机制差异

  • CommonJS：同步阻塞加载，适用于服务器端本地文件系统模块的加载，但在浏览器环境中存在性能问题。
  • ES6 Modules：异步加载，在浏览器环境中不会阻塞页面渲染，更适合现代Web应用的开发。

3. 适用场景差异

  • CommonJS：主要适用于Node.js服务器端开发，在Node.js的生态系统中被广泛应用。
  • ES6 Modules：既适用于浏览器端开发，也可以在支持ES6 Modules的服务器端环境中使用，逐渐成为现代JavaScript开发的主流模块化方案。

4. 模块导出差异

  • CommonJS：exports和module.exports本质上是同一个对象，exports是module.exports的一个引用。当需要导出单个对象或函数时，通常使用module.exports，因为直接对exports重新赋值不会改变module.exports的引用。
  • ES6 Modules：默认导出和命名导出使得模块的导出更加灵活，开发者可以根据实际需求选择合适的导出方式。

在项目中选择使用

1. 浏览器端项目

在浏览器端项目中，由于ES6 Modules的异步加载特性以及对静态分析的支持，推荐优先使用ES6 Modules。现代浏览器都已经原生支持ES6 Modules，可以直接在HTML中使用<script type="module">标签来引入模块。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 Modules in Browser</title>
</head>

<body>
    <script type="module">
        import msg from './message.js';
        console.log(msg);
    </script>
</body>

</html>

如果需要兼容旧版本浏览器，可以使用工具如Babel将ES6 Modules转换为CommonJS或其他兼容的格式。

2. Node.js项目

在Node.js项目中，CommonJS仍然是广泛使用的模块化方案，尤其是在一些传统的Node.js应用中。然而，从Node.js v13.2.0版本开始，Node.js已经支持以.mjs为扩展名的ES6 Modules。如果项目对新特性有需求，并且Node.js版本支持，也可以考虑在Node.js项目中使用ES6 Modules。

要在Node.js中使用ES6 Modules，需要将文件扩展名改为.mjs，并且在package.json中添加"type": "module"字段。

// 文件名：main.mjs
import { greet } from './utils.mjs';

console.log(greet('Tom'));

{
    "name": "my - project",
    "version": "1.0.0",
    "type": "module",
    "dependencies": {}
}

总结与展望

JavaScript的模块化开发从CommonJS到ES6 Modules的发展，反映了JavaScript语言在适应不同应用场景需求方面的不断进化。CommonJS为Node.js的崛起奠定了基础，而ES6 Modules则为JavaScript在浏览器和服务器端提供了更加统一和强大的模块化解决方案。

在未来的JavaScript开发中，ES6 Modules有望成为主流的模块化方案，随着浏览器和Node.js对其支持的不断完善，开发者能够更加便捷地利用其特性构建高效、可维护的应用程序。同时，模块化开发也将与其他前端和后端技术进一步融合，推动JavaScript生态系统的持续发展。无论是小型的Web应用还是大型的企业级项目，合理选择和使用模块化方案都是提高代码质量和开发效率的关键因素之一。