前端模块化发展（CommonJs、AMD、CMD、UMD、ESM）
前端工程化发展历程
文章目录
-
- 前端工程化发展历程
- 一、原始时期
- 二、立即执行函数（IIFE）
- 三、CommonJs、AMD、CMD、UMD、ESM
-
- 1.CommonJs
- 2.AMD
- 3.CMD
- 4.UMD
- 5.ESM
一、原始时期
没有模块化时期存在声明变量易引起污染；使用对象形势保存变量，又容易被重新命名书写等等问题。
二、立即执行函数（IIFE）
能够保护对象的私有属性。
三、CommonJs、AMD、CMD、UMD、ESM
1.CommonJs
相关：
- npm包文件内cjs文件夹，就是基于CommonJs打包后的代码。
优点：
- 每个文件都是一个独立模块，解决了变量的污染。
- 通过module.exports和require，实现模块间相互依赖。
缺点：
- 针对于服务器，浏览器端不支持。
- 运行时加载，不可以进行treeShaking。
- 同步加载，多模块加载速度慢。
使用：
a.js 导出
module.exports = {
a: function(p){
console.log(p);
}
}
b.js 引用
const a = require('./a.js');
a.a('msg');//msg
2.AMD
相关：
- AMD - (Asynchronous Module Definition) - 异步模块定义。
优点：
- 针对于浏览器端。
- 异步加载。
缺点：
- 不能实现按需加载。
- 需要单独引用require.js。
使用：
a.js 导出
define(function(){
return {
sum(a,b){
return a+b;
}
}
})
b.js 引用并导出
define(['a.js'],function(a){
const result = a.sun(1,1);
return {
result
}
})
main.js 连接html文件
require(['a','b'],function(a,b){
console.log(a,b);//a -> function ,b -> {result: 2};
})
index.html + 引用require.js
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./require.js" data-main="main.js"></script>
<!-- data-main属性必须，值引入main.js,可以是其他名 -->
</head>
3.CMD
相关：
- CMD推崇就近依赖，只有在用到某个模块的时候再去require。
优点：
- 针对于浏览器端。
- 可以实现按需加载。
缺点：
使用：
a.js 引入导出
define(function(require, exports, module) {
var b = require('./b.js');
var a = b.sum(1,1);
module.exports = a;
});
b.js 导出
define(function(require, exports, module) {
var b = {
sum(a,b){
return a + b;
}
}
module.exports = b;
});
index.html + 引用sea.js
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./sea.js"></script>
<!-- data-main属性必须，值引入main.js,可以是其他名 -->
</head>
<body>
<script>
//按需加载，用到的时候才调用use
seajs.use(['./a.js','./b.js'],function(a,b){
console.log(a,b);
})
</script>
</body>
4.UMD
相关：
- umd不能算是一种模块规范，因为它没有模块定义和调用，他结合AMD和CommonJS规范，保证模块可以被amd和commonjs调用。
- npm包文件内umd文件夹，就是结合了2种规范打包后的代码。
5.ESM
相关：
- ESM（ECMA Script Modules。
优点：
- 针对于浏览器。
- 静态编译，值得引用。
- 可以进行tree-shaking。
缺点：
- 服务器端不支持。
- 对浏览器有要求。
使用：
a.js 导出
export const a = 10;
export default {
sum(a,b){return a+b}
}
b.js 引用
import { a } from './a.js'
import Afun from './a.js';
console.log(Afun.sum(a,1));
export default {
}
index.html 引用
<script src="./b.js" type="module"></script>