前端 JS 经典：浏览器中 ESModule 的工作原理

前言：在开发中，我们经常写出如下代码。这就是 ES 模块化。那浏览器是如何运行的，它的运作机制到底是怎么样的呢。

在 index.html 导入 main.js

<script src="./main.js" type="module"></script>

在 main.js 中导入 bar.js

import bar from "./bar.js";

在 bar.js 中导入 foo.js 然后动态导入 async.js

import foo from "./foo.js";

import("./async.js").then((e) => {});

首先浏览器使用 ESModule 导入了 main.js，在这 main.js 里面又间接或直接导入了其他的 js。形成了模块化的依赖。

在浏览器导入 main.js 时，会做第一件事，模块化的解析，这不是 js 运行哦！那怎么来做解析呢，首先把这个 url 地址补全，因为现在是相对路径，然后去下载相应模块，拿到这个模块里面的代码，然后继续解析这个模块里面的代码，会拿到这个模块里所有的顶级静态导入语句。那什么是顶级静态导入语句勒，顶级是写在最上面的导入，静态就是，不是写在判断或循环里面的导入。比如 import bar from "./bar.js" 这种。

解析结束后，就会进行下一个阶段，模块的执行。怎么执行呢，回到入口文件，先执行第一行，如果是 import，就会进入到 from 导入的 js 里，又去执行 js 里面的代码，一直循环。执行结束后，会导出一个东西，导出后，浏览器会在内部生成一个映射表，为什么要做映射呢，是为了缓存，将来还有别的模块使用映射表里的模块，就直接从这个表格获取东西交给他了。

然后遇到动态导入语句，动态导入语句是在执行的时候导入，然后解析，得到完整的 url 地址，然后去下载这个 js。继续解析。

这就是浏览器 ESModule 的运行机制。