本文主要是介绍ESM和CommonJS详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
概述
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则没有这个限制
这篇关于ESM和CommonJS详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
