ESM浅析

借鉴

一、出现背景

早期javaScript程序很小，不需要模块化，发展到现在，我们有了运行大量JavaScript脚本的复杂程序，有必要开始考虑提供一种，将 JavaScript 程序拆分为可按需导入的单独模块的机制

二、模块系统解决了啥问题

JS的本质就是数据+函数，数据就是各种变量，如何组织这些变量，对代码的质量和对代码的管理非常重要

当变量较少时，我们考虑起来比较容易，可以通过scoped（作用域）来进行管理：一个函数无法访问定义在另一个函数的变量，但是这种方式也有缺点，就是让不同函数变量之间的共享成为了一种问题

如果我们需要在不同函数之间共享变量，有一个办法是：将变量放在更高一级的作用域中，比如global scope(全局作用域)，但是这种做法会造成两个问题：

        代码维护比较困难，代码之间的依赖关系是隐式的，任何函数都可以访问全局作用域，你却不知道哪个函数取决于哪个脚本

        这些变量位于全局作用域，全局作用域中的任何一段代码都能修改这些变量。恶意代码可以通过修改变量达到自己的目的，非恶意代码也可能破坏你的变量。

三、ESM做了什么

        模块会将这些函数和变量放入一个module scoep(模块作用域)。这个作用域可以让模块中的函数共享变量。

        和函数作用域不同，模块作用域可以显露自身变量给其他模块。还可以显式地声明将哪些变量、类、函数显露给其他模块。

        这种显露就称为export，使用export可以让其他模块显式的声明，其依赖于本模块的哪些变量、类或函数

四、ESM如何工作

        在进行模块式开发时，系统会建立一个模块依赖图，我们使用import和export语句，对不同的模块建立不同的依赖

        这些语句可以让浏览器或者node知道需要加载哪些代码，我们需要提供一个入口文件来作为这个模块依赖图的入口，之后通过import语句找到其余需要加载的代码