├── Module 的加载实现
│ ├── 浏览器加载
│ │ └─ 传统方法
│ │ └─ HTML 网页中，浏览器通过`<script>`标签加载 JavaScript 脚本。
│ │ └─ 如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。
│ │ └─ <script src="path/to/myModule.js" defer></script> <script src="path/to/myModule.js" async></script>
│ │ └─ `<script>`标签打开`defer`或`async`属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。
│ │ └─ `defer`与`async`的区别是：`defer`要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；`async`一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，`defer`是“渲染完再执行”，`async`是“下载完就执行”。另外，如果有多个`defer`脚本，会按照它们在页面出现的顺序加载，而多个`async`脚本是不能保证加载顺序的。
│ │ └─ 加载规则
│ │ └─ 浏览器加载 ES6 模块，也使用`<script>`标签，但是要加入`type="module"`属性。
│ │ └─ 浏览器对于带有`type="module"`的`<script>`，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了`<script>`标签的`defer`属性。
│ │ └─ 一旦使用了`async`属性，`<script type="module">`就不会按照在页面出现的顺序执行，而是只要该模块加载完成，就执行该模块。
│ │ └─ 对于外部的模块脚本（上例是`foo.js`），有几点需要注意。
│ │ └─ - 代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
│ │ └─ - 模块脚本自动采用严格模式，不管有没有声明`use strict`。
│ │ └─ - 模块之中，可以使用`import`命令加载其他模块（`.js`后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用`export`命令输出对外接口。
│ │ └─ - 模块之中，顶层的`this`关键字返回`undefined`，而不是指向`window`。也就是说，在模块顶层使用`this`关键字，是无意义的。
│ │ └─ - 同一个模块如果加载多次，将只执行一次。
│ │ └─ 利用顶层的`this`等于`undefined`这个语法点，可以侦测当前代码是否在 ES6 模块之中。
│ │ └─ ES6 模块与 CommonJS 模块的差异
│ │ └─ - CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
│ │ └─ - CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
│ │ └─ - CommonJS 模块的`require()`是同步加载模块，ES6 模块的`import`命令是异步加载，有一个独立的模块依赖的解析阶段。
│ │ └─
│ │ └─ CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
│ │ └─ ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令`import`，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的`import`有点像 Unix 系统的“符号连接”，原始值变了，`import`加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
│ │ └─ ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块。
│ │ └─ 由于 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。
│ │ └─ `export`通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。
│ ├── Node.js 的模块加载方法
│ │ └─ 概述
│ │ └─ JavaScript 现在有两种模块。一种是 ES6 模块，简称 ESM；另一种是 CommonJS 模块，简称 CJS。
│ │ └─ CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。语法上面，两者最明显的差异是，CommonJS 模块使用`require()`和`module.exports`，ES6 模块使用`import`和`export`。
│ │ └─ 从 Node.js v13.2 版本开始，Node.js 已经默认打开了 ES6 模块支持。
│ │ └─ Node.js 要求 ES6 模块采用`.mjs`后缀文件名。也就是说，只要脚本文件里面使用`import`或者`export`命令，那么就必须采用`.mjs`后缀名。Node.js 遇到`.mjs`文件，就认为它是 ES6 模块，默认启用严格模式，不必在每个模块文件顶部指定`"use strict"`。如果不希望将后缀名改成`.mjs`，可以在项目的`package.json`文件中，指定`type`字段为`module`。
│ │ └─ 如果这时还要使用 CommonJS 模块，那么需要将 CommonJS 脚本的后缀名都改成`.cjs`。如果没有`type`字段，或者`type`字段为`commonjs`，则`.js`脚本会被解释成 CommonJS 模块。
│ │ └─ `.mjs`文件总是以 ES6 模块加载，`.cjs`文件总是以 CommonJS 模块加载，`.js`文件的加载取决于`package.json`里面`type`字段的设置。
│ │ └─ ES6 模块与 CommonJS 模块尽量不要混用。`require`命令不能加载`.mjs`文件，会报错，只有`import`命令才可以加载`.mjs`文件。反过来，`.mjs`文件里面也不能使用`require`命令，必须使用`import`。
│ │ └─ package.json 的 main 字段
│ │ └─ `package.json`文件有两个字段可以指定模块的入口文件：`main`和`exports`。比较简单的模块，可以只使用`main`字段，指定模块加载的入口文件。
│ │ └─ "type": "module", 如果没有`type`字段，`index.js`就会被解释为 CommonJS 模块。
│ │ └─ import { something } from 'es-module-package'; 运行该脚本以后，Node.js 就会到`./node_modules`目录下面，寻找`es-module-package`模块，然后根据该模块`package.json`的`main`字段去执行入口文件。这时，如果用 CommonJS 模块的`require()`命令去加载`es-module-package`模块会报错，因为 CommonJS 模块不能处理`export`命令。
│ │ └─ package.json 的 exports 字段
│ │ └─ `package.json`文件的`exports`字段可以指定脚本或子目录的别名。
│ │ └─ （1）子目录别名
│ │ └─ `package.json`文件的`exports`字段可以指定脚本或子目录的别名。
│ │ └─ "./features/": "./src/features/"
│ │ └─ import feature from 'es-module-package/features/x.js';
│ │ └─ 加载 ./node_modules/es-module-package/src/features/x.js
│ │ └─ （2）main 的别名
│ │ └─ `exports`字段的别名如果是`.`，就代表模块的主入口，优先级高于`main`字段，并且可以直接简写成`exports`字段的值。
│ │ └─ "exports": {".": "./main.js"}
│ │ └─ "main": "./main-legacy.cjs",
│ │ └─ （3）条件加载
│ │ └─ 利用`.`这个别名，可以为 ES6 模块和 CommonJS 指定不同的入口。目前，这个功能需要在 Node.js 运行的时候，打开`--experimental-conditional-exports`标志。
│ │ └─ "exports": {".": {"require": "./main.cjs","default": "./main.js"}}
│ │ └─ 上面代码中，别名`.`的`require`条件指定`require()`命令的入口文件（即 CommonJS 的入口），`default`条件指定其他情况的入口（即 ES6 的入口）。
│ │ └─ 简写 "exports": {"require": "./main.cjs","default": "./main.js"}
│ │ └─ 如果同时还有其他别名，就不能采用简写，否则会报错。
│ │ └─ CommonJS 模块加载 ES6 模块
│ │ └─ `require()`不支持 ES6 模块的一个原因是，它是同步加载，而 ES6 模块内部可以使用顶层`await`命令，导致无法被同步加载。
│ │ └─ (async () => {await import('./my-app.mjs')})();
│ │ └─ ES6 模块加载 CommonJS 模块
│ │ └─ ES6 模块的`import`命令可以加载 CommonJS 模块，但是只能整体加载，不能只加载单一的输出项。
│ │ └─ import packageMain from 'commonjs-package'; 对
│ │ └─ import { method } from 'commonjs-package'; 错
│ │ └─ 因为 ES6 模块需要支持静态代码分析，而 CommonJS 模块的输出接口是`module.exports`，是一个对象，无法被静态分析，所以只能整体加载。
│ │ └─ 还有一种变通的加载方法，就是使用 Node.js 内置的`module.createRequire()`方法。
│ │ └─ 加载路径
│ │ └─ ES6 模块的加载路径必须给出脚本的完整路径，不能省略脚本的后缀名。`import`命令和`package.json`文件的`main`字段如果省略脚本的后缀名，会报错。
│ │ └─ 为了与浏览器的`import`加载规则相同，Node.js 的`.mjs`文件支持 URL 路径。
│ │ └─ 目前，Node.js 的`import`命令只支持加载本地模块（`file:`协议）和`data:`协议，不支持加载远程模块。另外，脚本路径只支持相对路径，不支持绝对路径（即以`/`或`//`开头的路径）。
│ │ └─ 内部变量
│ │ └─ ES6 模块应该是通用的，同一个模块不用修改，就可以用在浏览器环境和服务器环境。为了达到这个目标，Node.js 规定 ES6 模块之中不能使用 CommonJS 模块的特有的一些内部变量。
│ │ └─ 首先，就是`this`关键字。ES6 模块之中，顶层的`this`指向`undefined`；CommonJS 模块的顶层`this`指向当前模块，这是两者的一个重大差异。
│ │ └─ 其次，以下这些顶层变量在 ES6 模块之中都是不存在的。
│ │ └─ - `arguments`
│ │ └─ - `require`
│ │ └─ - `module`
│ │ └─ - `exports`
│ │ └─ - `__filename`
│ │ └─ - `__dirname`
│ ├── 循环加载
│ │ └─ “循环加载”（circular dependency）指的是，`a`脚本的执行依赖`b`脚本，而`b`脚本的执行又依赖`a`脚本。
│ │ └─ CommonJS 模块的加载原理
│ │ └─ CommonJS 的一个模块，就是一个脚本文件。`require`命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。
│ │ └─ CommonJS 模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
│ │ └─ CommonJS 模块的循环加载
│ │ └─ CommonJS 模块的重要特性是加载时执行，即脚本代码在`require`的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。
│ │ └─ CommonJS 输入的是被输出值的拷贝，不是引用。
│ │ └─ CommonJS 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。
│ │ └─
│ │ └─ ES6 模块的循环加载
│ │ └─ ES6 处理“循环加载”与 CommonJS 有本质的不同。ES6 模块是动态引用，如果使用`import`从一个模块加载变量（即`import foo from 'foo'`），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
