万剑归宗 | JavaScript 模块化探究 (二) ESM vs CJS

JavaScript 模块化探索之旅（二）：ESM vs CJS

在 JavaScript 模块化的世界中，ESM（ECMAScript Modules）和 CJS（CommonJS）是两大重量级选手，它们为我们提供了不同的模块化解决方案。虽然乍看之下，ESM 与 CJS 颇有几分相似之处，但深入了解之后，你会发现它们的实现方式截然不同。

模块加载方式：静若处子 VS 动如脱兔

ESM 采用的是静态加载方式，这意味着模块在解析时就被加载，并且不会被执行，只有在需要时才会执行。这种方式的好处是提高了加载速度，因为模块不会在解析时就被执行，从而避免了不必要的计算。

与 ESM 的静态加载方式不同，CJS 采用的是动态加载方式，这意味着模块在解析时不仅会被加载，而且会被立即执行。这种方式的优点是可以更早地发现错误，因为模块在解析时就已经被执行了。

模块定义方式：殊途同归，殊途同归

ESM 和 CJS 在模块定义方式上也有所不同。ESM 使用的是 export 和 import 来定义和引用模块，而 CJS 使用的是 require() 和 module.exports 来定义和引用模块。

ESM 的 export 关键字用于将模块中的变量、函数或类导出，以便其他模块可以引用。而 import 关键字用于将其他模块导出的变量、函数或类导入到当前模块中使用。

CJS 的 require() 函数用于加载一个模块，并将该模块导出的对象返回。而 module.exports 对象用于将当前模块导出的变量、函数或类导出。

模块执行顺序：前赴后继 VS 后发制人

在模块执行顺序上，ESM 和 CJS 也有所差异。ESM 采用的是前赴后继的执行顺序，这意味着模块按照它们被导入的顺序执行。而 CJS 采用的是后发制人的执行顺序，这意味着模块按照它们被加载的顺序执行。

ESM 的前赴后继执行顺序可以确保模块按照正确的顺序执行，避免出现依赖关系错乱的问题。而 CJS 的后发制人执行顺序可以确保模块在被执行之前已经加载完毕，从而避免出现模块未加载完成就执行的情况。

适用场景：各有千秋，相得益彰

ESM 和 CJS 在适用场景上也有所不同。ESM 更适用于现代浏览器环境，因为现代浏览器都支持 ESM。而 CJS 更适用于 Node.js 环境，因为 Node.js 使用的是 CJS 模块系统。

当然，ESM 和 CJS 并非水火不容，它们也可以在同一个项目中和谐共存。例如，你可以使用 ESM 来开发前端代码，使用 CJS 来开发后端代码。这样，你可以充分利用 ESM 和 CJS 的各自优势，打造出更加强大的应用程序。

结语

ESM 和 CJS 是 JavaScript 模块化世界中的两大巨头，它们各有千秋，相得益彰。在选择使用 ESM 还是 CJS 时，你需要根据你的项目需求和环境来做出决定。如果你正在开发一个现代浏览器环境下的项目，那么 ESM 是一个不错的选择。如果你正在开发一个 Node.js 环境下的项目，那么 CJS 是一个不错的选择。当然，你也可以在同一个项目中同时使用 ESM 和 CJS，从而充分利用它们的各自优势。