CommonJS 和 ES6 模块系统在语法和行为上有显著的区别：
CommonJS
CommonJS 是一种模块系统，主要用于 Node.js 环境。它使用 require 函数来引入模块，并使用 module.exports 来导出模块。
语法
- 导出模块：
// moduleA.js
const name = "John";
module.exports = name;
// 或者导出一个对象
const person = { name: "John", age: 30 };
module.exports = person;
- 引入模块：
// main.js
const name = require("./moduleA");
console.log(name); // 'John'
// 引入对象
const person = require("./moduleA");
console.log(person.name); // 'John'
console.log(person.age); // 30
特点
-
动态引入：
require可以在函数体内、条件语句中动态引入模块。if (condition) { const moduleA = require("./moduleA"); } -
同步加载：
require是同步的，模块在执行require时会立即加载并返回结果。 -
导出的是值的拷贝： 但对于对象和数组等引用类型，修改引用类型的属性会在所有引用中反映出来。
const obj = require("./moduleA"); obj.newProp = "new"; console.log(require("./moduleA").newProp); // 'new'
ES6 模块
ES6 模块系统是 ECMAScript 标准的一部分，使用 import 和 export 语法来定义模块，广泛用于现代前端开发以及一些支持 ES6 的服务器环境。
语法
- 导出模块：
// moduleA.js
export const name = "John";
// 导出默认值
const person = { name: "John", age: 30 };
export default person;
- 引入模块：
// main.js
import { name } from "./moduleA";
console.log(name); // 'John'
// 引入默认导出
import person from "./moduleA";
console.log(person.name); // 'John'
console.log(person.age); // 30
特点
-
静态引入：
import必须在文件的顶部声明，不能在函数体内或条件语句中使用（注意，这里有个例外，动态import()是可以在函数或者条件语句中使用的，这也是我们通常code splitting所依赖的特性）。这使得 ES6 模块可以在编译时确定依赖关系和优化。// 错误的用法 if (condition) { import { name } from "./moduleA"; } -
异步加载： 浏览器中的 ES6 模块是异步加载的，这意味着它们不会阻塞页面的其他加载过程。
-
导出的是值的引用： 导出值的引用意味着当导出模块中的值发生变化时，所有引用该值的地方都会反映出这些变化。
// moduleA.js export let count = 1; setTimeout(() => { count += 1; }, 1000); // main.js import { count } from "./moduleA"; setTimeout(() => { console.log(count); }, 2000); // 2
兼容性和转换
- CommonJS 和 ES6 模块的互操作性： 在 Node.js 环境中，可以使用工具如 Babel 或 Webpack 将 ES6 模块转换为 CommonJS 模块，从而实现兼容性。
- 双向兼容： 使用工具链（如 Babel、Webpack）可以同时支持 CommonJS 和 ES6 模块语法，并在构建过程中根据目标环境进行转换。
总结
- 语法区别： CommonJS 使用
require和module.exports，而 ES6 模块使用import和export。 - 加载方式： CommonJS 是同步加载，ES6 模块是静态分析和异步加载。
- 使用场景： CommonJS 主要用于 Node.js 环境，而 ES6 模块是 ECMAScript 标准的一部分，更适合现代前端开发。
选择使用哪种模块系统取决于项目需求和运行环境。对于现代前端开发，推荐使用 ES6 模块。对于 Node.js 项目，传统上使用 CommonJS，但也可以逐渐迁移到 ES6 模块。