js模块化CJS、AMD、CMD、UMD、ESM、IIFE理解

JS模块化

        JavaScript模块化编程是指将JavaScript代码分割成独立的模块，每个模块都有自己的作用域和接口，可以按需加载和使用。这样可以避免全局变量污染，提高代码的可维护性和可重用性。在ES6之前，JavaScript并没有一个统一的模块化规范，开发人员通常使用CommonJS或AMD等第三方库来实现模块化编程。

背景

        从四个维度来分析下js模块化，同步异步加载、变量的深浅拷贝、适用范围、代码表现。

        针对于深浅拷贝来说，module.exports+require这样的操作就是浅拷贝可以共享内存，对于export import这样的操作就是深拷贝这个可以看之前的博客。

        使用了rollup打包了umd。

CJS(commonjs)

同步异步加载：同步
适用范围：nodejs
代码表现：

// a.js
module.exports = {
    boo: 10
}
 
// b.js
const {boo} = require('a.js')
console.log(boo)

AMD

同步异步加载：：异步
适用范围：nodejs、配合reqirejs可以在浏览器中使用
代码表现：参考umd代码

define(["exports"], factory);

CMD

同步异步加载：同步
适用范围：nodejs和配合reqirejs可以在浏览器中使用
代码表现：参考umd代码

define(function(require, exports, module) {
    exports.a = 10
    factory(exports);
});

UMD

同步异步加载：同步
适用范围：nodejs和浏览器
代码表现：兼容了commonjs、cmd、amd

(function (global, factory) {
  if (typeof exports === "object" && typeof module !== "undefined") {
	// commonjs
    factory(exports);
  } else if (typeof define === "function" && define.amd) {
	// amd
    define(["exports"], factory);
  } else if (typeof define === "function" && define.cmd) {
	// cmd
	define(function(require, exports, module) {
        exports.a = 10
		factory(exports);
	});
  } else {
	// 没有环境
    (global = typeof globalThis !== "undefined" ? globalThis : global || self),
      factory((global.umd = {}));
  }
})(this, function (exports) {
  "use strict";
 
  console.log(3424221233);
  var sum = function sum(a, b) {};
 
  exports.sum = sum;
 
  Object.defineProperty(exports, "__esModule", { value: true });
});

ESM

同步异步加载：异步
适用范围：浏览器（随着浏览器的发展，可以在script的标签中加入type="module"来支持）和nodejs（Node verison 13.2.0，有两种方式1：package.json中填写type: "modules"，2.将文件结尾命名为mjs）
代码表现：

// a.js
let boo = 10
export default boo
 
// b.js
import boo from "boo"
console.loG(boo)

IIFE（立即执行函数）

同步异步加载：同步
适用范围：nodejs和浏览器
代码表现：

(function() {
    var foo = "bar";
    console.log(foo);
})();

结论

        在webpack、rollup、esm各种打包器中都可以设置对应的产物类型，我们要根据我们的产物的用途来选择对应的类型，我们一般并不会关心最终的代码产物，但是对于各种类型的产物还是要有一定的了解，这篇文章算是个简单的总结。

鹰眼：悲哀的弱者，如果你真是一流的剑士，就算没跟我交手也明白你我实力的差距吧