es6 和 commonJS 模块管理的区别

🕗 发布于 2024-09-21 11:01 es6 前端 ecmascript

ES6 模块和 CommonJS 模块是两种广泛使用的 JavaScript 模块化方案。它们之间有许多显著的区别，包括语法、特性、运行时行为、兼容性等方面。

1. 模块引入背景

在 JavaScript 语言发展早期，并没有提供官方的模块化机制。随着应用规模的增加，开发者需要将代码拆分成更小的模块，来实现更好的维护性、复用性和解耦性。于是社区开发了多种模块系统，CommonJS 是其中之一。CommonJS 主要应用于 Node.js 环境中，成为了服务器端 JavaScript 的标准模块系统。

然而，随着前端应用的复杂性逐渐增加，JavaScript 在浏览器环境中也迫切需要一种标准化的模块机制。因此，ECMAScript 6（ES6）引入了官方的模块系统——ES6 模块（也叫 ECMAScript Modules，ESM）。

2. 语法和导入导出方式

2.1 CommonJS

CommonJS 使用 require 函数引入模块，使用 module.exports 导出模块。其语法非常直观，代码加载是在运行时完成的。

// 导出
const fs = require('fs');

function readFile(filename) {
    return fs.readFileSync(filename, 'utf-8');
}

module.exports = {
    readFile,
};

在上面的例子中，我们通过 require 引入了 Node.js 内置的 fs 模块，然后导出了一个 readFile 函数供其他模块使用。

// 引入
const { readFile } = require('./fileReader');
console.log(readFile('example.txt'));

在引入模块时，通过 require 动态加载所需模块，并访问其导出的内容。

2.2 ES6 模块

ES6 模块使用 import 和 export 语句进行模块的引入和导出。与 CommonJS 不同，ES6 模块的引入是在编译时进行的，并且 import 和 export 语句是声明式的。

// 导出
import fs from 'fs';

export function readFile(filename) {
    return fs.readFileSync(filename, 'utf-8');
}

引入模块时，使用 import 关键字：

// 引入
import { readFile } from './fileReader.js';
console.log(readFile('example.txt'));

ES6 模块可以进行命名导出（named exports）和默认导出（default exports），这使得模块导出机制更加灵活。

// 默认导出
export default function greet() {
    console.log('Hello, World!');
}

// 命名导出
export const pi = 3.14;

// 引入默认导出和命名导出
import greet, { pi } from './utils.js';

greet(); // Hello, World!
console.log(pi); // 3.14

2.3 语法上的主要区别

CommonJS 使用 require 和 module.exports，而 ES6 模块使用 import 和 export。
CommonJS 可以在运行时动态引入模块，而 ES6 模块是静态导入的，必须在代码的顶层声明导入。
ES6 模块可以导入部分模块内容（通过命名导出），而 CommonJS 导入时必须引入整个模块。

3. 模块加载机制

3.1 CommonJS 的加载机制

CommonJS 模块是同步加载的。这意味着在服务器端（如 Node.js）使用时，模块在代码运行时动态加载。这种方式适用于服务器端 JavaScript，因为在服务器环境中，模块文件已经存在于磁盘上，可以快速加载。

当使用 require 导入一个模块时，Node.js 会按顺序执行该模块的所有代码，并将结果缓存在内存中。这意味着，如果同一个模块被多次 require，只会在第一次加载时执行其代码，后续加载将从缓存中获取。这种机制称为单例模式。

// 运行时同步加载
const data = require('./data.json');
console.log(data);

3.2 ES6 模块的加载机制

ES6 模块则是异步加载的，特别是在浏览器环境中，模块文件通常需要从远程服务器获取，因此必须采用异步机制来避免阻塞代码执行。

ES6 模块的引入是基于静态分析的，这意味着 JavaScript 引擎在编译时会预先解析 import 语句，并构建模块的依赖关系图。这种静态加载机制使得 ES6 模块能够进行诸如 Tree Shaking 等优化，因为编译器可以确定哪些模块或代码片段未被使用，并在打包时移除它们。

// 浏览器端异步加载
<script type="module">
    import { readFile } from './fileReader.js';
    console.log(readFile('example.txt'));
</script>

在这种情况下，模块的加载和执行是非阻塞的，浏览器会自动处理依赖关系并按需加载模块。

4. 顶层作用域和模块作用域

4.1 CommonJS

在 CommonJS 中，每个文件被视为一个模块，并且有自己的模块作用域。模块的顶层变量和函数不会与其他模块发生冲突。因为 CommonJS 模块在执行时，代码实际上是被包裹在一个函数里，避免了与其他模块的命名冲突。

// a.js
const x = 1;
module.exports = x;

// b.js
const y = 2;
module.exports = y;

// x 和 y 是独立的

4.2 ES6 模块

ES6 模块同样有自己的模块作用域。每个模块在其自身的作用域内运行，模块之间不会相互干扰。此外，ES6 模块默认采用严格模式（use strict），这意味着一些常见的 JavaScript 问题（如隐式全局变量）会被自动避免。

// utils.js
const secret = 'hidden';
export const pi = 3.14;

// math.js
import { pi } from './utils.js';

console.log(secret); // ReferenceError: secret is not defined

在上述代码中，secret 变量只在 utils.js 模块中可见，math.js 无法访问该变量。

5. 缓存与单例模式

5.1 CommonJS

如前所述，CommonJS 模块系统遵循单例模式，即每个模块只会被加载和执行一次。模块的内容会被缓存起来，如果该模块再次被引入，Node.js 会直接返回缓存的结果。

// 只有首次 require 时，模块代码会被执行
const foo = require('./foo');
foo(); // "foo loaded"

在此之后，require('./foo') 将只会返回已缓存的模块对象，而不会重新执行其代码。

5.2 ES6 模块

ES6 模块也会被缓存，但其行为略有不同。因为 ES6 模块是基于静态分析的，并且在模块的导入阶段已经建立了依赖关系，所以它在每次引入时都会返回同一个模块实例。换句话说，ES6 模块同样是单例的。

不过，ES6 模块的缓存和 CommonJS 不同，它更加强调对模块依赖图的静态优化。

6. 动态引入

6.1 CommonJS

CommonJS 允许你在程序的任何位置动态引入模块，因为 require 是一个普通的函数，它可以根据条件进行调用。

if (condition) {
    const moduleA = require('moduleA');
} else {
    const moduleB = require('moduleB');
}

这种灵活性使得 CommonJS 非常适合构建需要在运行时确定依赖关系的应用。

6.2 ES6 模块

ES6 模块的静态特性使得它不支持像 CommonJS 那样的动态导入。不过，ES6 提供了一个 import() 函数来实现动态引入。import() 返回一个 Promise，并且是在异步加载模块时使用的。

if (condition) {
    import('./moduleA.js').then(moduleA => {
        // 使用 moduleA
    });
} else {
    import('./moduleB.js').then(moduleB => {
        // 使用 moduleB
    });
}

这种动态引入的方式为 ES6 模块提供了异步加载和按需加载的能力，非常适合用于前端开发，特别是在构建大型应用时，可以有效地减少初始加载时间。

7. 兼容性与适用场景

7.1 CommonJS

CommonJS 是为服务器端设计的模块系统，Node.js 完全支持它。因此，如果你的项目主要在服务器

端运行，CommonJS 通常是一个不错的选择。

然而，CommonJS 并不是为浏览器环境设计的，虽然有一些工具（如 Browserify）可以将 CommonJS 模块打包到浏览器中使用，但相比于 ES6 模块，CommonJS 并不是浏览器的原生模块系统。

7.2 ES6 模块

ES6 模块是 JavaScript 官方规范的一部分，现代浏览器原生支持 ES6 模块。在浏览器环境下，ES6 模块是首选的模块化方案，特别是在前端应用开发中，结合 Webpack 等工具，ES6 模块可以很好地优化代码，提升加载效率。

Node.js 也在逐步支持 ES6 模块，尽管在某些情况下仍需通过 --experimental-modules 标志开启实验性支持，但在未来，ES6 模块将成为 Node.js 的主流模块系统。

总结

ES6 模块和 CommonJS 模块各有其优点和适用场景。CommonJS 适合服务器端开发，具有运行时加载、动态引入和单例缓存的特点。ES6 模块则更加现代化，支持静态分析、异步加载和浏览器原生支持，在前端开发中展现出显著的优势。

在开发过程中，选择哪个模块系统应根据项目的需求和运行环境来决定。如果是在浏览器中开发现代化的前端应用，ES6 模块是最佳选择；而如果是构建基于 Node.js 的后端应用，CommonJS 依然是主流。

原文地址：https://blog.csdn.net/Flying_Fish_roe/article/details/142374785

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：如何解决DataGrip的 Public Key Retrieval is not allowed错误
下一篇：LeetCode题练习与总结：数字 1 的个数--233

web worker使用
在worker中如果要使用es语法，需要加上 { type: ‘module’ }
阅读更多2024-09-21
激光粉尘传感器：筑牢粮仓安全防线，有效应对粮食粉尘爆炸高危风险
粮食粉尘爆炸的危害不容忽视，而激光粉尘传感器作为现代科技在安全生产领域的重要应用，为粮食企业提供了强有力的安全保障。通过实时监测粉尘浓度，及时预警并采取相应措施，不仅能够有效预防粉尘爆炸事故的发生，还
阅读更多2024-09-21
Rocprofiler测试
Rocprofiler测试。
阅读更多2024-09-21
fmql之ubuntu联网
需求：fmql搭载linux，并且可以远程访问。
阅读更多2024-09-21
VulnHub-Narak靶机笔记
Narak是一台Vulnhub的靶机，其中有简单的tftp和webdav的利用，以及motd文件的一些知识。
阅读更多2024-09-21
【Kubernetes】常见面试题汇总（二十七）
Kubernetes在不同的云基础架构上运行各种工作负载Google 容器引擎
阅读更多2024-09-21
数字化转型的理论框架对比：从多维视角指导企业成功变革对比DPBOK&IT4IT&COBIT&TOGAF
本文将对比DPBOK与其他常见的数字化转型框架，如IT4IT、COBIT、TOGAF，深入探讨这些理论在不同维度上的差异，并从多个角度解读它们对企业数字化转型的实际指导意义。
阅读更多2024-09-21
构建响应式API：FastAPI Webhooks如何改变你的应用程序
如果你在构建多个微服务或应用程序，Webhook可以用来在它们之间进行实时通信。
阅读更多2024-09-21
第二十九章添加数字签名 - 指定 KeyInfo 的规范化方法
KeyInfo>
阅读更多2024-09-21
Gradio离线部署到内网，资源加载失败问题（Gradio离线部署问题解决方法）
Gradio作为一个快速构建一个演示或Web应用的开源Python包，被广泛使用，最近在用这个包进行AI应用构建，打包部署到内网Docker的时候发现有些资源无法使用。gradio 运行时的UI使用的
阅读更多2024-09-21