概述

ESM 和 CommonJS 是前端非常常见的两种规范或模块标准，本文将重点讲述这两者的定义、适用范围以及区别。

ESM

ESM即 ECMAScript Modules,是 Javascript 的官方模块化标准，旨在统一 Javascript 的模块化机制。

ESM 的导出和导入

• 导出：使用 export 关键词导出模块内容，可以是命名导出或默认导出

/** a.js */
export const obj = () => {console.log(5);
};//默认导出
const greet = () => {console.log("Hello World");
};
export default greet;

• 导入：使用import语法来加载模块

/** b.js */
import greet, { obj } from "../a.js";

特点

• 异步加载：支持异步加载，适合浏览器环境，与 Javascript 的动态加载功能兼容良好
• 静态分析：支持静态分析，意味着在编译时可以检查模块的依赖关系，对于优化和工具链支持如tree-shaking很有帮助
• 浏览器支持：ESM 可以直接在浏览器中使用，只需要写成<script type='module'>即可
• 严格模式：默认在严格模式下运行

CommonJS

CommonJS是一个 Javascript 模块标准，主要用于 Node.js 环境

模块的导入导出

• 导出：使用module.exports或exports对象来导出模块内容

/** a.js */
module.exports = () => {console.log("commonjs");
};

• 导入：使用require()函数来加载模块

/** b.js */
const greet = require("./a.js");
greet();

特点

• 同步加载：CommonJS 是同步加载的，所以模块正在代码执行时会被即时加载，这可以用SSR
• 文件系统：CommonJS 模块依赖于 Node.js 的文件系统，因此不适用于浏览器
• 模块缓存：CommonJS 在第一次加载模块后，会缓存模块导出的结果，因此如果后续加载相同的模块时会使用缓存，避免重复加载

ESM和CommonJS对比

ESM使用import加载模块时，必须放在文件的最顶部，而CommonJS使用require则没有这个限制