如何让浏览器支持es6语法浏览器 es module

转载

mob64ca13f96cda 2024-03-22 12:22:08

文章标签 如何让浏览器支持es6语法前端 ESM ES Module 模块化 文章分类 架构后端开发

ES Module原理详解

一、ES Modules如何工作

流程简析

二、模块加载

1、构造
2、实例化
3、求值

总结
参考

如何让浏览器支持es6语法浏览器 es module_模块化

一、ES Modules如何工作

当前，在浏览器中通过 <script type="module"> 已原生支持 ESM。以vite创建的Vue3项目为例：

// index.html文件
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>xxxx</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

其中/src/main.ts是Vue3的入口文件。

注意：浏览器中ES Module是异步加载，不会堵塞浏览器，即等到整个页面渲染完，再执行模块脚本。如果网页有多个ESM，它们会按照在页面出现的顺序依次执行。

流程简析

1、创建AST

当使用ES Modules进行开发时，实际上以入口节点为根节点（如main.js）创建出一张依赖关系图。不同依赖项之间通过export\import语句来进行关联。

如何让浏览器支持es6语法浏览器 es module_模块化

2、生成 Module Record

浏览器无法直接使用文件本身，但是浏览器会解析这些文件，根据 import/export 语句构成模块记录(Module Record)，每个模块文件对应生成一个 Module Record，记录当前模块的信息：

如何让浏览器支持es6语法浏览器 es module_ES Module_03

3、转化 Module Instance

模块记录转化为模块实例，浏览器最终能够读取也就是Module Instance。

二、模块加载

模块加载的过程就是从入口文件到拥有一个完整的模块实例图的过程，对于 ES Module 来说，分三步进行：

构造：查找、下载并解析所有文件到模块记录中。

实例化：在内存中寻找一块区域来存储所有导出的变量（但还没有填充值）。然后让 export 和 import 都指向这些内存块。这个过程叫做链接（linking）

求值：在内存块中填入变量的实际值。

如何让浏览器支持es6语法浏览器 es module_模块化_04

1、构造

在构造阶段，每个模块都会经历三件事情：

查找：找出从哪里下载包含该模块的文件（也称为模块解析）；

通常会有一个入口文件，然后通过import代码去寻找与之关联的其他模块，形成一个依赖关系树（AST）；

下载：获取文件（从 URL 下载或从文件系统加载）；

解析文件前，需要一层一层地遍历树，找出它的依赖项，然后找到并加载这些依赖项；

解析：将文件解析为模块记录；

把解析出来的模块构成表称为 Module Record （模块记录）。
Module Record 包含了当前模块的 AST，引用了哪些模块的变量，以及一些特定属性和方法。
一旦 Module Record 被创建，它会被记录在模块映射Module Map中。被记录后，如果再有对相同 URL 的请求，Loader 将直接采用 Module Map 中 URL 对应的Module Record。

在构造过程结束时，从主入口文件变成了一堆模块记录Module Record：

如何让浏览器支持es6语法浏览器 es module_前端_05

2、实例化

实例化阶段：将构造的模块实例化并将所有实例链接在一起。

模块实例包含两部分：代码、状态。

状态存在于内存中，因此实例化步骤就是写入内存。

首先，JS引擎创建一个模块环境记录(Module Enviroment Record)来管理 Module Record 的变量。然后它在内存中找到所有导出内容对应的位置。模块环境记录将跟踪内存中导出内容对应的位置与导出内容间的联系。

此时内存中的这些位置中还不会存放值，只有在计算后才会有值。

注意，导出和导入都指向内存中的同一位置。首先链接导出，可确保所有导入都可以链接到匹配的导出。
ES Module 的这种连接方式被称为 Live Bindings（动态绑定）;
ES 模块使用称为动态绑定的东西。两个模块都指向内存中的相同位置。这意味着当导出模块更改值时，该更改将显示在导入模块中。导出值的模块可以随时更改这些值，但导入模块不能更改其导入的值，虽然有此限制，但是如果一个模块导入一个对象，导入模块中可以更改该对象上的属性值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luLYO6K6-1652615360924)(http://img.wawow.xyz/imgs/esm5.png)]

拥有这样的动态绑定可以使我们在不运行任何代码的情况下连接所有模块。

实例化结束时，已经连接了export/import变量的所有实例和内存位置。