当前位置：首页 > news >正文

ES6模块化和CommonJs模块化区别

news 来源：原创 2025/5/17 14:34:59

在JavaScript中，模块化是将代码拆分成独立的块，每个块可以独立封装和管理。ES6模块化和CommonJS是两种常见的模块化规范，它们在语法、加载方式和运行时特性上有显著差异。

语法差异

CommonJS模块使用require()和module.exports来导入和导出模块。例如：

// CommonJS模块

const fs = require('fs');

module.exports = {

readFile: fs.readFile,

writeFile: fs.writeFile

};

ES6模块使用import和export来导入和导出模块。例如：

// ES6模块

import { readFile, writeFile } from 'fs';

export { readFile, writeFile };

在Node.js中，CommonJS模块通常使用.cjs后缀，而ES6模块使用.mjs后缀1。

加载方式

CommonJS模块是运行时加载，这意味着模块在代码运行时被加载。例如：

const { readFile } = require('fs');

这种加载方式会在运行时生成一个对象，然后从该对象中读取方法1。

ES6模块是编译时加载，这意味着模块在编译时就被加载。例如：

import { readFile } from 'fs';

这种加载方式在编译时就能确定模块的依赖关系和输入输出的变量1。

运行时特性

CommonJS模块输出的是一个值的拷贝，这意味着模块内部的变化不会影响到输出的值。例如：

// lib.js

let counter = 3;

function incCounter() {

counter++;

}

module.exports = { counter, incCounter };



// main.js

const mod = require('./lib');

console.log(mod.counter); // 3

mod.incCounter();

console.log(mod.counter); // 3

ES6模块输出的是值的引用，这意味着模块内部的变化会影响到输出的值。例如：

// lib.js

export let counter = 3;

export function incCounter() {

counter++;

}



// main.js

import { counter, incCounter } from './lib';

console.log(counter); // 3

incCounter();

console.log(counter); // 4

此外，CommonJS模块是同步加载，而ES6模块是异步加载2。

使用场景

在Node.js环境中，CommonJS模块更常用，因为它是Node.js的默认模块系统。而在浏览器环境中，ES6模块更常用，因为它是现代浏览器的标准模块系统3。

总结来说，ES6模块化和CommonJS在语法、加载方式和运行时特性上有显著差异。选择哪种模块化规范取决于具体的使用场景和需求。