前端模块化发展介绍和未来展望

模块化的基础是IIEE

 

本文对模块化做一下总结。

模块化是工程化的基础：只有能将代码模块化，拆分为合理单元，才能使其具备调度整合得的能力，才有架构和工程一说。

 

什么是模块化？

对于一个复杂的应用程序，与其将其所有代码全部放在一个文件中，不如按照一定的语法，遵循确定的规则将其拆分到几个相互独立的文件中，这些文件具备原子特定性，其内部完成共同的或者类似的逻辑，通过对外暴露一些数据或者调用方法与外部进行整合。

 

模块化发展历程

IIFE模式

最早的被认可的模块化方案是IIFE模式：通过构建一个私有作用域，再通过闭包，将需要对外暴露的数据和接口输出。这种模式是现代模块化方案的基础。利用构建工具webpack打包后的模块化就是这种模式。

 

(function(window, $){
  let data = 'data'
  function foo(){
      console.log(3)
  }

  function bar(){
    data = '333'
    console.log(222)
  }

  window.module = {foo, bar} // 对外暴露
})(window,JQuery)

 

规范标准阶段

1，Commonjs

Commonjs是Nodejs带来的。其具备以下几个特点：

1）文件即模块，文件内的所有代码都运行在独立的作用域中，因此不会污染全局空间

2）模块可以被多次引用、加载。在第一次被加载时，会被缓存，之后都从缓存中直接读取结果

3）加载某个模块，就是引入该模块的module.exports属性

4）module.exports属性输出的是值的拷贝，一旦这个值被输出，模块内在发生变化也不会影响到输出的值

5）模块按照代码引入的顺序进行加载

6）同步加载模块文件，因此不适合浏览器端

 

2，AMD

AMD的代表是requirejs。requirejs通过define方法，将代码定义为模块，通过require方法实现模块的加载。其底层也是一个IIFE。

有一个知识点：在我过去使用requirejs时候发现即使引入了模块也没有看到引入的script，其实这是被requirejs删除了，因为模块内容已经被加载了，一旦加载完成就没必要保留script了。

 

3，CMD

CMD的代表是seajs。和AMD的requirejs相比，requirejs是异步的，而seajs既可以是同步的也可以是异步的。

 

4，UMD

UMD也就是Universal Module Definition。其实就是上面三种情况做了一个整合。

 

ES原生

ES模块的设计思想是尽量静态化，保证在编译时就确定模块之间的依赖关系，每个模块的输入和输出变量都是确定的；而Commonjs和AMD无法保证编译时就确定这些内容，这俩只能在运行时确定。另外，Commonjs模块输出的是一个值的拷贝，ES模块输出的是值的引用。

 

说下ES原生规范的优势

ES设计成静态的，能够很好的分析导入的依赖。如果导入的模块没有被使用，可以通过tree shaking等手段减少代码体积，进而提升运行性能。

 

当然ES模块化规范预热带来一些限制：

1）只能在文件顶部引入依赖

2）导出的变量类型受到严格限制

3）变量不允许被重新定义，也就是read-only

 

未来发展展望

ES模块化是未来发展的趋势，它具有开箱即用的tree shaking和对未来浏览器的兼容性支持。目前各大浏览器都开始逐步支持ES模块化。而这一点也是构建工具vite的基础。