[JS高级]ESModule和commonJS的原理和执行过程

ES Module 和 CommonJS 是JavaScript模块化的两种规范。

1. CommonJS

CommonJS 规范主要用于服务器端，Node.js 在早期就采用了这种规范。CommonJS 模块化规范的主要特点是使用require来同步加载模块，使用module.exports或exports来导出模块。

// 导出模块
const someFunction = () => {
  // ...
};
module.exports = someFunction;
 
// 导入模块
const someFunction = require('./someModule.js');

2. ES Module

ES Module 是ECMAScript标准的一部分，主要用于浏览器和服务器端，支持静态静态导入和动态导入。其特点是使用import来异步加载模块，使用export来导出模块。

// 导出模块
export const someFunction = () => {
  // ...
};
 
// 导入模块
import { someFunction } from './someModule.js';

两者的区别在于加载模块的机制不同，CommonJS 是运行时加载，ES Module 是编译时加载。因此，在编译阶段，ES Module 可以进行静态分析，进行 tree-shaking 和代码分割等优化。

在浏览器端，由于历史原因，JavaScript 模块还是以 CommonJS 形式存在，直到2015年ES6正式发布，浏览器才开始支持ES Module。为了兼容不同规范，可以在构建工具（如Webpack、Rollup等）中配置相应的加载器（如babel-loader）来转换代码。