CommonJs和ES Module之间的微妙差异

2023-12-09 00:25:12

JavaScript缺乏成熟的模块体系，促使社区制定了一些模块加载方案，以便实现模块化开发。Node.js采用CommonJS作为其模块加载规范，而ES6原生提供了模块化解决方案，可以完全替代CommonJS。本文将深入比较两种模块系统的区别，并通过示例展现其应用场景。

差异概述

特征	CommonJS	ES Module
模块包装	使用require加载模块	使用import加载模块
导出模块	通过exports导出模块	使用export导出模块
模块文件后缀	.js	.js
变量作用域	全局作用域	块级作用域
运行时	Node.js	浏览器
异步模块加载	CommonJS不支持异步模块加载	ES Module支持异步模块加载
动态导入	CommonJS不支持动态导入	ES Module支持动态导入
工具支持	Webpack, Browserify	Rollup, Webpack

CommonJS

CommonJS规范适用于Node.js开发，其核心函数是require()，用于加载和使用模块。模块中的变量和函数在全局作用域内共享，因此在CommonJS中，避免使用与其他模块冲突的变量和函数名至关重要。CommonJS在Node.js中被广泛使用，并被许多流行的工具链所支持。

CommonJS示例

// module1.js
// 导出模块
exports.message = "Hello, World!";

// module2.js
// 导入模块
var message = require('./module1').message;

// 使用模块
console.log(message); // 输出: "Hello, World!"

ES Module

ES Module是ECMAScript 2015（ES6）中引入的标准模块化系统，其核心函数是import和export。使用import加载模块，通过export导出模块，模块中的变量和函数在块级作用域内共享。ES Module支持异步模块加载和动态导入，并且可以与各种工具链一起使用。

ES Module示例

// module1.js
// 导出模块
export const message = "Hello, World!";

// module2.js
// 导入模块
import { message } from './module1.js';

// 使用模块
console.log(message); // 输出: "Hello, World!"