CommonJS和ES模块有什么区别

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

import()

语法上的差异

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

AGI-Eval评测社区

AI大模型评测社区

63

查看详情

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模块有什么区别的详细内容，更多请关注php中文网其它相关文章！