前端发展到如今，社区生态已经非常丰富。

在无数开源大神的努力下，很多前端开发的痛点(比如「静态类型检查」、「浏览器兼容性」)早已有了事实上的标准解决方案(比如TS、babel)。

然而，在这繁荣之下，有一个日常开发不易感知的问题：

• 模块化规范的混乱

你可曾遇到过莫名其妙的bug，在多方搜资源，反复验证，耗费数个小时终于发现：

原来是某个包导出的是CJS，而项目使用ESM导致。

比如这个例子：记一次打包压缩报错[1]

如果你觉得这是个很容易发现的问题，再考虑结合上node_modules的层层依赖呢?

这个问题，揭开了模块化规范间斗争与博弈的冰山一角。

作为现代前端工程化的基石，模块化规范有太多值得深究的内容。

我会花几篇文章来讲解模块化规范。本文是第一篇，会围绕模块化规范的演进展开。

正文

如果问十年前的前端最头疼的是什么?一定是浏览器兼容性。

随着babel等编译工具出现，兼容性逐渐被工程化方案解决(ES6+编译为ES5)。

不仅是「兼容性」问题，DSL(如JSX、VUE的模版语法)、代码压缩、代码静态检查(TS)等日常开发的刚需都能在工程化方案中找到解决办法。

如果将当今繁荣的前端工程化生态比喻为一座大厦，那大厦的地基一定是「模块化规范」。

现代JS代码都是基于「模块化规范」组织起来，让我们从下往上来看看这座大厦：