Day_09 : 让 Vite 来开启你的Vue 之 Vite 核心 Native ESM

Hi Dai Gei Ho~ 我是Winnie～ 大家中秋节快乐。

这几天在看自己文章的时候发现 Vite 的背後核心篇 文章顺序好像那里怪怪的，总觉得既然Native ESM是主核心，顺序改成 Native ESM > esbuild > HMR 会不会比较好XD。

今天文章来到了第九篇，而此篇内容我们要介绍的是 之前一直反覆提到的 Native ESM，同时这也是介绍 Vite 背後核心 篇的最後一章。

其实在之前文章 微谈模组化历史与 前进Vite 章节中 ，我们就有稍微介绍 ESM，而此篇内容 主要会在再深入点来说说 ESM运作过程。

Native ESM

『ES6 Modules or JavaScript Modules』 简称ESM，是在 ES6 之後所出现的 模组正式规范，其中最大特点是可以在浏览器中使用import 与 export语法，让浏览器来处理这些模组，而在支援度上 也获得 多数主流 浏览器认可(如下图)。

ESM 使用语法使用如下：

// banana.js 输出

exports const banana =  'banana'  

// guava.js 引入
import { banana } from './banana'

使用注意：在输出function的 js中，一只档案中 只能有一个 export default 可以有多个 export

ESM 是怎麽运作的呢？

当我们使用 ESM 规范来开发时，一开始就是在 建构模组的依赖图，浏览器会透过 <script src="main.js" type="module"> 找到 进入点 main.js ，浏览器 会根据 import的 url路径 (Module Specifier) 一层一层加载 模组档案，产生 模组依赖图

於是 根据 模组依赖图 将模组解析为 模组纪录，当 模组记录 被创建，就会被放到模组映射里。

接着 JS 引擎会创建一个 模组环境记录（Module Environment Record），里面会管理模组纪录的所有变数，为所有模组分配内存空间。模组环境变量会跟踪内存中的位置对应位置来导出，而在这阶段这些内存中的位置暂时还没有实际的值， 只有在最後一步 JS 引擎通过执行最上层程序码才会进行被填充实际的值。

综合以上 ESM 运作模式主要有3个流程：

1. 构建(Counstruction): 寻找与下载所有文件并将其解析为模组记录。
2. 实例化(Instantation):在内存中找到空间放置所有导出的值，接着将导出和导入都指向内存中的空间。
3. 评估(Evaluation)：执行程序码来填充内存的值

以上就是今天的文章， 谢谢大家的阅读，如有问题欢迎大家的指教。

图片来源：https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
ps，针对 ESM的运作模式这边 我觉得因为 一些专有名词不熟悉的部分 可能会解释的不够清楚，导致有些流程被省略了，所以如果大家有兴趣更深入了解 可以到上方图片来源的连结 观看更详细解释，谢谢。