CommonJS 和 ES6 模块系统在语法和行为上有显著的区别：

CommonJS

CommonJS 是一种模块系统，主要用于 Node.js 环境。它使用 require 函数来引入模块，并使用 module.exports 来导出模块。

语法

• 导出模块：

复制
1// moduleA.js
2const name = 'John';
3module.exports = name;
4
5// 或者导出一个对象
6const person = { name: 'John', age: 30 };
7module.exports = person;

• 引入模块：

复制
1// main.js
2const name = require('./moduleA');
3console.log(name); // 'John'
4
5// 引入对象
6const person = require('./moduleA');
7console.log(person.name); // 'John'
8console.log(person.age);  // 30

特点

1. 动态引入： require 可以在函数体内、条件语句中动态引入模块。

   复制
   1if (condition) {
   2    const moduleA = require('./moduleA');
   3}

2. 同步加载： require 是同步的，模块在执行 require 时会立即加载并返回结果。

3. 导出的是值的拷贝： 但对于对象和数组等引用类型，修改引用类型的属性会在所有引用中反映出来。

   复制
   1const obj = require('./moduleA');
   2obj.newProp = 'new';
   3console.log(require('./moduleA').newProp); // 'new'

ES6 模块

ES6 模块系统是 ECMAScript 标准的一部分，使用 import 和 export 语法来定义模块，广泛用于现代前端开发以及一些支持 ES6 的服务器环境。

语法

• 导出模块：

复制
1// moduleA.js
2export const name = 'John';
3
4// 导出默认值
5const person = { name: 'John', age: 30 };
6export default person;

• 引入模块：

复制
1// main.js
2import { name } from './moduleA';
3console.log(name); // 'John'
4
5// 引入默认导出
6import person from './moduleA';
7console.log(person.name); // 'John'
8console.log(person.age);  // 30

特点

1. 静态引入： import 必须在文件的顶部声明，不能在函数体内或条件语句中使用（注意，这里有个例外，动态import()是可以在函数或者条件语句中使用的，这也是我们通常code splitting所依赖的特性）。这使得 ES6 模块可以在编译时确定依赖关系和优化。

   复制
   1// 错误的用法
   2if (condition) {
   3    import { name } from './moduleA';
   4}

2. 异步加载： 浏览器中的 ES6 模块是异步加载的，这意味着它们不会阻塞页面的其他加载过程。

3. 导出的是值的引用： 导出值的引用意味着当导出模块中的值发生变化时，所有引用该值的地方都会反映出这些变化。

   复制
   1// moduleA.js
   2export let count = 1;
   3setTimeout(() => { count += 1; }, 1000);
   4
   5// main.js
   6import { count } from './moduleA';
   7setTimeout(() => { 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 模块。