es module, ES Module的使用也很简单，相关语法也很少，核心是import和export
所有主流浏览器都将支持 ES 模块
1.模块解决什么问题？
用 JavaScript 编码就是管理变量。这一切都是关于为变量赋值，或为变量添加数字，或将两个变量组合在一起并将它们放入另一个变量中
let a = 1;
a += 2
由于作用域在 JavaScript 中的工作方式，函数无法访问在其他函数中定义的变量
如果您确实想在范围之外共享变量怎么办？处理这个问题的一种常见方法是将它放在您上方的范围内……例如，放在全局范围内,但它们会导致一些烦人的问题。
首先，所有脚本标签都需要按正确的顺序排列。然后你必须小心确保没有人把这个顺序弄乱。
如果您确实弄乱了该顺序，那么在运行过程中，您的应用程序将抛出错误
一旦您能够在模块之间导出和导入变量，就可以更轻松地将代码分解为可以相互独立工作的小块。然后你可以组合和重新组合这些块，有点像乐高积木，从同一组模块创建所有不同类型的应用程序。
2.模块如何提供帮助？
模块提供了一种更好的方式来组织这些变量和函数。使用模块，可以将有意义的变量和函数组合在一起。
这将这些函数和变量放入模块范围。模块作用域可用于在模块中的函数之间共享变量
Module Instances
当使用模块进行开发时，会构建一个依赖关系图。不同依赖项之间的连接来自使用的任何导入语句 从入口文件开始，浏览器或者Node就沿着每一条"import"语句找到下面的代码。
main.js
import { count } from './counter.js';
import { render } from './dispaly.js';
但是，浏览器却使用不了这些文件。所有的文件都必须要转变为一系列被叫做“Module Records（模块记录）的数据结构，这样浏览器才能明白这些文件的内容。
在这之后，module record需要被转化为“module instance（模快实例）”。一个module instance包含2种东西：code和state。
code就是一系列的操作指令，就像菜单一样。但是，光有菜单，并不能作出菜，你还需要原材料。
而state就是原材料。State就是变量在每一个特地时间点的值。当然，这些变量只是内存里面一个个保存着值的小盒子的小名而已。
模块实例的产生步骤
对于，ES Module来说，这需要经历三个步骤：
- 1: 构建- 找到，下载所有的文件并且解析为module records。
- 2: Instantiation（实例化）- 在内存里找到所有的“盒子”，把所有导出的变量放进去（但是暂时还不求值）。然后，让导出和导入都指向内存里面的这些盒子。这叫做“linking(链接)”。
- 3: Evaluation（求值）- 执行代码，得到变量的值然后放到这些内存的“盒子”里。
构建
对于每一个模块来说，构建阶段，每个模块都会发生三件事:
- 1: 去哪里下载包含模块的文件（又叫“ module resolution（模块识别）”）
- 2: 获取文件（通过从一个URL下载或者从文件系统加载）
- 3: 把文件解析为module record（模块记录）
1.查找文件并获取它
加载程序将负责查找文件并下载它。首先它需要找到入口点文件。在 HTML 中，您可以使用脚本标记告诉加载器在哪里找到它。
<script src="main.js" type="module"></script>
解析
现在我们已经获取了这个文件，我们需要把它解析成一个模块记录。这有助于浏览器了解模块的不同部分是什么。
创建模块记录后，将其放置在模块映射中。这意味着无论何时从现在开始请求它，加载器都可以从该地图中提取它。
解析中有一个细节看似微不足道，但实际上却有很大的影响。所有模块都被解析，就好像它们"use strict"在顶部一样
实例化
实例结合了代码和状态。该状态存在于内存中，因此实例化步骤就是将事物连接到内存中。
首先，JS引擎创建一个模块环境记录。这管理模块记录的变量。然后它在内存中找到所有导出的框。模块环境记录将跟踪内存中的哪个框与每个导出相关联。
仅供学习参考
