ES6和CommonJS的区别解析

ES6和CommonJS是Javascript中两种不同的模块系统，都能够让开发人员更好地组织代码和管理依赖关系，但它们在许多方面都有所不同。

ES6模块系统

ES6模块系统定义了一种新的语法形式，可以让开发人员更好地编写面向对象的代码，并支持静态分析、编译时优化、自动代码拆分等高级特性。

创建ES6模块非常简单，只需要在脚本文件的顶部使用 import 和 export 来导出和导入模块：

// example.js
export function greet(name) {
  return `Hello, ${name}!`;
}

// main.js
import { greet } from './example.js';
console.log(greet('World')); // 输出: "Hello, World!"

ES6模块也支持 export default 语法，可以在一个模块中导出一个默认的值，例如：

// example.js
const PI = 3.14159;
export default PI;

// main.js
import PI from './example.js';
console.log(PI); // 输出: 3.14159

CommonJS模块系统

CommonJS是另一种流行的模块系统，主要用于服务器端的Javascript开发。CommonJS定义了一组API，可用于定义模块、导入和导出模块。与ES6不同，CommonJS的模块导入和导出是基于值的，而不是基于引用的。

创建CommonJS模块也很容易，只需要使用 module.exports 和 require 关键字来导出和导入模块：

// example.js
module.exports = function greet(name) {
  return `Hello, ${name}!`;
};

// main.js
const greet = require('./example.js');
console.log(greet('World')); // 输出: "Hello, World!"

在CommonJS中，还有一个名为 exports 的全局变量，是对 module.exports 的一个引用，例如：

// example.js
exports.PI = 3.14159;

// main.js
const example = require('./example.js');
console.log(example.PI); // 输出: 3.14159

ES6模块和CommonJS模块的区别

1. 语法不同：ES6使用import/export语句，而CommonJS使用require()和module.exports关键字。
2. 加载时机不同：ES6模块在编译时就会加载，因此它们是静态的，而CommonJS模块则是在运行时加载，因此它们是动态的。
3. 导出方式不同：ES6模块支持export default导出一个默认值，而CommonJS模块不支持这种方式。
4. 编译时执行开销不同：ES6模块采用了类似静态编译器处理的方式，编译时就会进行变量声明、检查、优化等操作，而CommonJS模块则是在运行时逐行解释执行的。
5. 环境支持不同：ES6模块目前已经广泛应用于现代浏览器和Node.js环境中，但在一些特定的运行环境下可能不支持（如某些旧版的浏览器和Node.js）；而CommonJS则是Node.js环境中默认的模块加载方式。

示例

ES6模块示例、CommonJS模块示例：

// example.mjs (ES6模块)
let PI = 3.14159;
export default PI;

// main.mjs (ES6模块)
import PI from './example.mjs';
console.log(PI); // 输出: 3.14159

// example.js (CommonJS模块)
module.exports = {
  greet: function(name) {
    return `Hello, ${name}!`;
  }
};

// main.js (CommonJS模块)
const example = require('./example.js');
console.log(example.greet('World')); // 输出: "Hello, World!"

此处 *.mjs 文件是 ES6 模块文件扩展名，需在执行 ES6 模块文件时，使用 --experimental-modules 参数进行启动，步骤为：

1. 在 example.mjs 文件所在的目录下，执行以下命令

bash
node --experimental-modules example.mjs

1. main.mjs 的执行方式与 example.mjs 类似。

在 Node.js 14 及以上版本，可以省略参数 --experimental-modules，并且扩展名为 .mjs 的文件会默认认为是 ES6 模块文件。