ESM是什么

ES Modules（ESM）用于解决模块 ECMAScRIPt 规范。 尽管 Node.js 长期用 CommonJS 标准化，但浏览器从未有过模块系统。 每一个关键决策(如模块系统)必须首先由模块系统决定 ECMAScript 标准化，然后由浏览器执行。

这一标准化过程就在那里 ES6 完成后，浏览器开始实施这一标准，并尝试以同样的工作方式保持一致性，现在， Chrome，Safari，EDGe 和 Firefox（从 60 逐渐适用于版本) ES 模块。

ES modules（ESM） 是 JavaScript 官方标准化模块系统。然而，他已经在标准化的道路上花了近一笔钱 10 年时间。

令人欣慰的是，标准化之路即将实现。直到那时。 2022 年 5 月 Firefox 60 发布后，每个主流浏览器都支持 ESM 了。同时，Node 模块工作组也在为模块工作组工作 Node.js 加上 ESM 适用。为 WebAssembly 给予 ESM 综合工作也在如火如荼地进行。

很多 JS 开发者都知道，是的 ESM 讨论从一开始就没有停止过。但很少有人真正理解。 ESM 工作原理。

模块到底克服了什么问题？

仔细想想，应用程序 JavaScript 编号在于对变量的准确管理，在于给变量赋值，或者给变量赋值，或者拼写两个变量，并将它们给另一个变量。

因为你的大部分代码都在变化变量，如何组织这个变量将对你的编码方法及其代码维护产生重大影响。

当一次只考虑几个变量时，促使事情变得更简单，JavaScript 有一种方法可以帮助你实现这个目标，那就是帮助你实现这个目标， —— 功能域。由于功能域的出现，函数无法浏览 在其他函数中定义变量。

这很棒。这意味着，当你致力于完成一个函数时，只要你致力于完成这个函数，你就不必担心其他函数对这个函数的变量。

然而，它也有一个缺陷，这使得不同函数之间的共享变量变得更加困难。

那么，如果你真的想在作用域之外分享你的变量呢？一般的做法是把它放在当前的作用域以上，比如全球作用域。

也许你还记得应用程序 jQuery 这些日子，从你载入一切， jQuery 在软件之前，你必须确保 jQuery 已经存在于整体作用领域。

这是可行的，但会产生一些烦人的问题。

首先，你拥有的一切 script 所有的标志都必须放置在正确的顺序中。所以一定要小心，以确保这个脚本不会相互影响。

如果你真的不小心弄乱了顺序，那么在代码运行时，你就会抛出异常。当函数探索时。 jQuery 对象存有 —— 也就是说，在全球范围内，但找不到时，函数就会出错并停止执行。

这使得代码维护变得复杂。删除旧代码或旧代码。 script 标志就像玩赌厅的轮盘。你无法预测任何代码可能会崩溃。代码之间的依赖关系变得隐藏起来。所有的函数都可以掌握整个角色领域的其他东西，所以你不知道哪个函数依赖哪个函数 script 标识。

其次，由于您的变量存在于全球范围内，所有在此范围内的代码都可以更改此变量。恶意程序可以通过更改这个变量来使你的代码不是你的意图，或者非恶意代码会意外地破坏你的变量。

如何帮助模块

该模块为您提供了一种更好的组织变量和方法的方法。有了模块，您可以将这个有价值的函数与变量组织结合起来。

该模块将该函数和变量放入模块作用域中。模块作用域促使模块中的差异函数共享该变量。

然而，与函数作用域不同，模块作用域有一种促进其他模块浏览模块变量的方法。它们可以显示特定模块中的变量，类或函数可以被其他模块浏览。

当一些东西可以用于其他模块时，它被称为 “导出(export)”。当模块导出存在时，其他模块可以根据模块的一些变量、类别或函数显式地特定它们。

由于这种明显的关系，你可以清楚地强调，当你删除另一个（导出）时，哪个模块会崩溃。

一旦你有了这种可以在模块中间导出和导入变量的水平，就很容易将你的代码分割成更小的代码块，并且可以相互独立工作。 然后你需要组合或重组这个编码块，就像乐高积木一样，用同一个模块建立不同的应用程序。

由于模块如此有效，已经有很多给予了 JavaScript 尝试添加模块。目前，有两种模块系统得到了广泛的应用。CommonJS(CJS) 曾经被 Node.js 所使用。ESM(ECMAScript 模块)是一个更新的模块系统，并添加到中 JavaScript 在规范中。浏览器已经适用了 ES 模块了，Node.js 此外，还适用于它。

现在，让我们更深入地看看这个新的模块系统是如何工作的。

ES 模块是如何工作的？

当使用模块开发时，将建立一个模块模块依赖图。不同的中间联系来自于你使用的所有内容 import 句子。

这种 import 句子是浏览器还是 Node 确切地知道你必须载入什么样的代码。您需要提供一个文档作为依赖图的入口。 从这个渠道，根据这些渠道， import 句子可以找到剩下的编码。

但是浏览器不能直接使用这些文档本身。它必须通过分析转化为一种叫做的文档。 “模块纪录（Module Records）”算法设计。只有这样，浏览器才能准确地知道文档中发生了什么。

此后，模块记录必须转换为模块案例。模块案例包括两个因素：编号：编号(code)和状态(state)

编号基本上是一系列的指令。就像秘方一样。但只有秘方本身什么都做不了，所以需要一些原材料来配合这个命令。

什么是情况？状态带来了这种原材料。情况是这些变量在任何时候的实际值。当然，这种变量只是存储在内存中的容器的昵称。

因此，模块案例集成了编号(一系列指令)和状态(每个变量的值)。

- END -