模块化的过程
- 开始,是以
文件的划分
,来进行模块化处理,但是,会有命名冲突和模块加载顺序的问题
- 第二种是以
命名空间
的方式,通过给window
添加属性挂载对应模块,来进行命名冲突的解决,但是安全性欠佳,因为可以随意修改模块里面的属性
- 第三种是
IIFE(立即执行函数)
来进行模块化处理,让第二种方式的安全性得到提升,各自拥有各自的作用域.
- 最后还是没有解决模块加载循序错误,会导致程序bug的问题,接下来
CommonJS
、AMD
和 ES Module
就依次出现了.
- 首先,是
commonJs
,这是nodejs用来解决模块化的方式,代码中使用 require
来导入一个模块,用module.exports
来导出一个模块,这个解决方式,只能够在服务器端使用,并且是同步的,虽然有第三方库实现了在浏览器使用,但是由于commonJs
是同步执行的方式,所以,由于浏览器的渲染引擎和js引擎互斥,在加载模块的过程中,会导致加载变慢.
- 接着,
AMD
出现,全称为Asynchronous Module Definition
,即异步模块定义规范.可以在浏览器中使用异步加载模块,不会造成渲染堵塞了.AMD
通过 define
去定义或加载一个模块,通过define
加载模块时,可以通过传入另一个模块,来解决依赖顺序的问题.AMD
还可以通过require
来加载一个模块,但是不能定义模块.但是由于AMD
没有得到浏览器的支持,需要第三方库的支持,如requireJS
.最后因为AMD
使用起来比较复杂,所以,还是比较欠妥
- 接着
UMD
,这个处理规范,和CMD
类似,只是兼容 AMD
和CommonJS
的一个模块化方案,可以同时运行在浏览器和 Node.js 环境
- 最后,
ES Module
诞生了,简称esm
.这个规范已经得到了现代浏览器和nodeJs的支持,所以它二种环境都支持.但是在浏览器环境中需要在script
标签添加type="module"
才能开启,在Node环境中,需要在package.json
中添加type: "module"
. 最后vite
框架,就是运用了这个,在开发时实现了no-bundle
,即不需要打包,让开发效率得到很大的提升.