前端模块化发展（CommonJs、AMD、CMD、UMD、ESM）

前端工程化发展历程

一、原始时期

没有模块化时期存在声明变量易引起污染；使用对象形势保存变量，又容易被重新命名书写等等问题。

二、立即执行函数（IIFE）

能够保护对象的私有属性。

三、CommonJs、AMD、CMD、UMD、ESM

1.CommonJs

相关：

1. npm包文件内cjs文件夹，就是基于CommonJs打包后的代码。

优点：

1. 每个文件都是一个独立模块，解决了变量的污染。
2. 通过module.exports和require，实现模块间相互依赖。

缺点：

1. 针对于服务器，浏览器端不支持。
2. 运行时加载，不可以进行treeShaking。
3. 同步加载，多模块加载速度慢。

使用：

a.js 导出

module.exports = {
   
	a: function(p){
   
	   console.log(p);
	}
}

b.js 引用

const a = require('./a.js');
a.a('msg');//msg

2.AMD

相关：

1. AMD - (Asynchronous Module Definition) - 异步模块定义。

优点：

1. 针对于浏览器端。
2. 异步加载。

缺点：

1. 不能实现按需加载。
2. 需要单独引用require.js。

使用：

a.js 导出

define(function(){
   
  return {
   
    sum(a,b){