模块化是一种将代码拆分成独立、可重用的模块的方法。每个模块都有自己的作用域,并且可以导出和导入特定的变量、函数或类。模块化的主要目的是提高代码的可维护性和可重用性。
JavaScript 的模块化在 ES 2015 得到了语言层面的支持。
模块化发展历程
JavaScript 在 ES 2015 之前,模块化并没有得到语言层面的支持。在 ESM 出现之前为了解决模块化的问题,社区中涌现了有不少模块化规范标准,这些标准现在仍然发挥着的作用,因此后面对这些规范做一个简单的介绍。
CommonJS
Node.js 默认使用的是 CommonJS 规范,目前 Node.js 也支持 ESM。在 Node.js 中,每一个文件就是一个模块,具有单独的作用域,对其他文件是不可见的。
通过 CommonJS 规范加载模块是同步的,在 Node.js 场景,因为所有的文件一般都已经存储在本地硬盘了,因此不需要额外的网络请求进行异步加载。
AMD
由于 CommonJS 规范是同步加载的,并不适合在浏览器环境中运行。因此社区推出了 AMD 规范,全称为 Asynchronous Module Definition。AMD 模块加载是异步的,因此完全适用于浏览器场景。
UMD
UMD 全称为 Universal Module Definition。UMD 旨在解决在不同的环境中使用不同的模块系统的问题。UMD 规范允许编写的模块同时兼容 AMD、CommonJS 和全局变量的引入方式。
ESM 为什么设计成静态的?
ESM 被设计成静态的一个明显的优势就是通过静态分析,能够分析出导入的依赖。如果导入的模块没有被使用,就可以通过 tree shaking 等手段减少代码体积,进而提升运行性能。