前端模块化发展(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

相关:

  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){
	  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

相关:

  1. CMD推崇就近依赖,只有在用到某个模块的时候再去require。

优点:

  1. 针对于浏览器端。
  2. 可以实现按需加载。

缺点:

使用:

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

相关:

  1. umd不能算是一种模块规范,因为它没有模块定义和调用,他结合AMD和CommonJS规范,保证模块可以被amd和commonjs调用。
  2. npm包文件内umd文件夹,就是结合了2种规范打包后的代码。

5.ESM

相关:

  1. ESM(ECMA Script Modules。

优点:

  1. 针对于浏览器。
  2. 静态编译,值得引用。
  3. 可以进行tree-shaking。

缺点:

  1. 服务器端不支持。
  2. 对浏览器有要求。

使用:

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>

你可能感兴趣的:(前端工程化,前端,javascript)