通过动画让你深入理解 ES modules

带着图片生动地让你理解 es module ，了解浏览器为何设计它，每一步的设计都是为了解决什么问题，从底层理解与 commonjs 的区别。原理理解从没这么简单！

随着 Firefox 60 在 beta 版本支持 ES modules, 所有主流的浏览器都支持 ES modules， 并且 Node modules 工作组也正在致力于让 node 支持 ES module 。WebAssembly 的 ES modules 也正在进行中。也让 vite 等大火。可谓是让前端又进入了下一阶段。

但是很多人依然不理解 ES modules 如何工作，接下来来讲解 ES modules 解决了什么问题以及它与其他模块系统中的模块有何不同。

模块是为了解决了什么问题？

现在开始思考一下， JS 的语法是不是都爱声明变量，管理变量。如下：因为你的代码大部分都是在修改变量，如何写出优雅的代码，提高代码可维护性取决于你如何组织这些变量。

一次只考虑几个简单的变量会让代码编写更简单，你不需要担心你的代码对其他模块是否会造成影响。JS 提供了一个方式：Scopes 去帮助你处理这种问题。由于 Scopes 在 JS 的工作方式，函数不能访问定义在其他函数中的变量。如下图：

这是非常好的，因为这样当你处理一个函数时，你只用思考这个函数，不用考虑其他函数是否会影响你的变量。

不过，它也有缺点，比如它会让在2个函数之间共享变量变得困难。

如果你想要在 scopes 外共享变量，该怎么做？一个通用的方法是将这个变量提升到这个 scopes 外，比如，放在 global scope 。

在 jquery 时代，如果你想使用插件，必须确保 jquery 在 global scope 。如下图：

这样是可以解决问题的，但是他也导致了一些恼人的问题。

首先，所有的 script 必须按照正确的顺序加载。确保没人打乱顺序。如果顺序被打乱，在运行的时候，应用程序就会报错：在运行时需要获取 jquery 全局变量时，jquery 却没加载 ，如下图：

这样维护代码会变得非常困难。你在改变 script 加载顺序或者移除旧代码时，就变成一场“赌局”，代码之间的依赖关系是隐式的，所有函数可能都会去 global scopes 中获取变量或者修改变量，非常地不可控。

modules 起到了什么作用？

modules 提供了一种更好的方式去组织你的变量和函数。

将这些函数和变量放入一个 modules 中。modules scopes 可用于在模块中的函数之间共享变量。

modules scopes 跟 function scopes 不同的地方在于，他可以清晰地定义在模块中哪些变量，类，或者函数可以被共享。

因为这具有显示的关系，你可以知道在哪些 modules 移除的时候，代码会报错。

一旦你有了在 modules 引入或导出变量的能力时，它会使得代码分解成可以独立工作的 chunks 会变得更容易。你可以组合或拆解这些 chunks ，让乐高组件一样，去组建不同的应用。

因为 modules 非常地有用，有很多方式去添加模块功能到 JS 中。现在有 2种