CommonJS与ES模块区别详解

本文深入对比解析了JavaScript中两种主流模块化方案：CommonJS与ES模块。**CommonJS**主要应用于Node.js环境，采用**同步加载**，使用`require`和`module.exports`。**ES模块**则更适用于浏览器及现代Node.js环境，采用**异步加载**，使用`import`和`export`。两者在循环依赖处理、动态导入支持等方面存在显著差异。文章详细阐述了CommonJS和ES模块在模块加载方式、语法、适用场景及循环依赖处理上的区别，并介绍了如何在Node.js和浏览器中使用这两种模块化方案。未来，ES模块有望逐渐取代CommonJS，成为JavaScript模块化的主流选择。

CommonJS采用同步加载，ES模块采用异步加载；2. CommonJS使用require和module.exports，ES模块使用import和export；3. CommonJS适用于Node.js环境，ES模块适用于浏览器及现代Node.js环境；4. CommonJS处理循环依赖时可能获取未初始化值，ES模块通过拓扑排序可靠处理；5. CommonJS不支持动态导入，ES模块支持import()动态加载；6. Node.js需设置"type": "module"并使用.mjs或.js文件启用ES模块；7. 浏览器需通过打包工具将CommonJS转换为可运行格式；8. 未来ES模块将逐渐取代CommonJS成为主流模块化方案。

CommonJS和ES模块是JavaScript中两种不同的模块化方案，主要区别在于加载方式、语法和适用场景。CommonJS主要用于Node.js环境，采用运行时加载；ES模块则主要用于浏览器环境，采用静态编译。

CommonJS和ES模块的区别

模块加载方式的区别

CommonJS使用require同步加载模块。这意味着在代码执行到require语句时，会立即加载并执行对应的模块。这种方式在服务器端环境下表现良好，因为文件系统访问速度快。但在浏览器端，同步加载会导致页面阻塞，影响用户体验。

ES模块使用import异步加载模块。浏览器可以在解析HTML时预先加载ES模块，或者使用动态import()在运行时按需加载。这种方式避免了页面阻塞，提高了加载效率。ES模块还支持静态分析，可以在编译时进行优化。

语法上的差异

CommonJS使用exports或module.exports导出模块，使用require导入模块。例如：

// module.js
exports.myFunction = function() {
  console.log('Hello from CommonJS module!');
};

// main.js
const module = require('./module');
module.myFunction();

ES模块使用export导出模块，使用import导入模块。例如：

// module.js
export function myFunction() {
  console.log('Hello from ES module!');
}

// main.js
import { myFunction } from './module.js';
myFunction();

ES模块的语法更加灵活，支持命名导出和默认导出。命名导出可以导出多个变量、函数或类，而默认导出只能导出一个值。

适用场景的不同

CommonJS最初是为Node.js设计的，因此在服务器端JavaScript环境中广泛使用。它适用于构建命令行工具、服务器应用等。

ES模块是JavaScript官方的模块化标准，主要用于浏览器端。它适用于构建大型Web应用、SPA等。随着Node.js对ES模块的支持越来越完善，ES模块也逐渐在Node.js环境中得到应用。

循环依赖的处理方式

CommonJS在处理循环依赖时，会先执行当前模块，然后将exports对象传递给依赖模块。如果依赖模块在当前模块执行之前就访问了exports对象，可能会得到未完全初始化的值。

ES模块在处理循环依赖时，会先解析所有模块的依赖关系，然后按照拓扑排序的顺序执行模块。这样可以避免循环依赖导致的问题。ES模块的这种处理方式更加可靠。

是否支持动态导入

CommonJS不支持动态导入。只能在代码中使用require同步加载模块。

ES模块支持动态导入。可以使用import()函数在运行时按需加载模块。这对于代码分割、懒加载等场景非常有用。例如：

async function loadModule() {
  const module = await import('./module.js');
  module.myFunction();
}

loadModule();

动态导入可以提高应用的性能和用户体验。

如何在Node.js中使用ES模块

Node.js从v13.2.0开始正式支持ES模块。要使用ES模块，需要满足以下条件：

1. 文件扩展名为.mjs或.js，并且在package.json中设置"type": "module"。
2. 使用import和export语法。
3. 使用node --experimental-modules命令运行程序。

例如：

// package.json
{
  "type": "module"
}

// main.mjs
import { myFunction } from './module.js';
myFunction();

node --experimental-modules main.mjs

虽然Node.js开始支持ES模块，但CommonJS仍然是Node.js中最常用的模块化方案。

如何在浏览器中使用CommonJS

浏览器原生不支持CommonJS。要使用CommonJS，需要使用打包工具（如Webpack、Parcel）将CommonJS模块转换为浏览器可以识别的格式。

打包工具会将CommonJS模块及其依赖打包成一个或多个JavaScript文件，然后在HTML文件中引入这些文件。这样就可以在浏览器中使用CommonJS模块了。

未来趋势

随着ES模块的普及，它将逐渐取代CommonJS成为JavaScript中最主要的模块化方案。ES模块具有更好的性能、更可靠的循环依赖处理方式和更灵活的语法。Node.js对ES模块的支持也越来越完善，这使得ES模块在服务器端JavaScript环境中也越来越受欢迎。

到这里，我们也就讲完了《CommonJS与ES模块区别详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于模块化,异步加载,CommonJS,ES模块,同步加载的知识点！