CommonJS 和 ES6 模块系统是 JavaScript 中两种主要的模块处理方式。它们在语法、加载方式和使用场景上都有显著的区别。
一、CommonJS
CommonJS 是一种模块规范,主要用于服务器端(如 Node.js)。它的特点包括:
- 同步加载:模块是同步加载的,适用于服务器端环境。
- 导出和导入:使用 module.exports 导出模块,使用 require 导入模块。
- 动态加载:模块可以在代码运行时动态加载。
示例代码
// math.js
function add(a, b) {
return a + b;
}
module.exports = {
add
};
// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 输出: 5
二、ES6 模块
ES6 模块是 JavaScript 的官方模块系统,适用于浏览器和服务器端。它的特点包括:
- 静态加载:模块是静态加载的,编译时就确定了模块依赖关系。
- 导出和导入:使用 export 导出模块,使用 import 导入模块。
- 支持树摇优化:由于静态分析的特性,未使用的代码可以在打包时被移除。
示例代码
// math.js
export function add(a, b) {
return a + b;
}
// app.js
import { add } from './math';
console.log(add(2, 3)); // 输出: 5
三、主要区别
- 语法:
- CommonJS 使用 module.exports 和 require。
- ES6 模块使用 export 和 import。
- 加载方式:
- CommonJS 是同步加载,适用于服务器端。
- ES6 模块是静态加载,适用于浏览器和服务器端。
- 动态 vs 静态:
- CommonJS 支持动态加载,可以在代码运行时决定加载哪些模块。
- ES6 模块是静态的,编译时就确定了模块依赖关系。
- 优化:
- ES6 模块支持树摇优化,可以在打包时移除未使用的代码。
- CommonJS 不支持树摇优化。
- 作用域:
- CommonJS 模块在加载时执行,模块的顶层作用域是模块自身。
- ES6 模块在导入时不会执行,模块的顶层作用域是模块自身。
四、兼容性
- CommonJS:主要用于 Node.js 环境,广泛支持现有的 Node.js 生态系统。
- ES6 模块:现代浏览器和 Node.js(v12+)都支持 ES6 模块,但在某些旧环境中可能需要使用 Babel 等工具进行转译。
五、结论
CommonJS 和 ES6 模块系统各有优缺点,选择哪种模块系统取决于你的项目需求和运行环境。对于新的前端项目,推荐使用 ES6 模块,因为它是 JavaScript 的官方标准,并且支持更好的优化。对于现有的 Node.js 项目,CommonJS 仍然是一个可靠的选择。