图说 ES Modules

原文：ES modules: A cartoon deep-dive, Lin Clark

ES modules（ESM） 是 JavaScript 官方的标准化模块系统。
然而，它在标准化的道路上已经花费了近 10 年的时间。

可喜的是，标准化之路马上就要完成了。等到 2018 年 5 月 Firefox 60 发布之后，所有的主流浏览器就都支持 ESM 了。同时，Node 模块工作小组也正在为 Node.js 添加 ESM 支持。为 WebAssembly 提供 ESM 集成的工作也正在如火如荼的进行。

许多 JS 开发者都知道，对 ESM 的讨论从开始至今一直都没停过。但是很少有人真正理解 ESM 的工作原理。

今天，让我们来梳理梳理 ESM 到底解决了什么问题，以及它跟其他模块系统之间有什么区别。

为何要模块化

说到 JS 编程，其实说的就是如何管理变量。
编程的过程都是关于如何给变量赋值，要么直接赋值给变量，要么是把两个变量结合起来然后再把结果赋值给另一个变量。

因为大部分代码都是关于改变变量的，所以如何组织这些变量就直接影响了编码质量，以及维护它们的成本。

如果代码中仅有少量的变量，那么组织起来其实是很简单的。
JS 本身就提供了一种方式帮你组织变量，称为函数作用域。因为函数作用域的缘故，一个函数无法访问另一个函数中定义的变量。

这种方式是很有效的。它使得我们在写一个函数的时候，只需要考虑当前函数，而不必担心其它函数可能会改变当前函数的变量。
不过，它也有不好的地方。它会让我们很难在不同函数之间共享变量。

如果我们想跟当前函数以外的函数共享变量要怎么办呢？一种通用的做法是把要共享的变量提升到上一层作用域，比如全局作用域。

在 jQuery 时代这种提升做法相当普遍。在我们加载任何 jQuery 插件之前，我们必须确保 jQuery 已经存在于全局作用域。

这种做法也确实行之有效，但是也带来了令人烦恼的影响。
首先，所有的