1、什么是模块化？什么是模块化规范？

模块化是一种管理方式，是一种生产方式，一种解决问题的方案。用一个模块去实现一个特定的功能，通过加载不同模块使用不同功能。但在使用模块开发时，一定要遵循一定的规范，因此就产生了模块化规范

2、为什么需要模块化开发和模块化规范？

当项目过大时，很容易产生变量、函数、对象命名冲突，而模块化可以解决命名冲突问题，而良好的模块化规范可以很好的降低代码耦合关系，提高代码扩展性、可维护性以及复用性，统一的模块化规范可以降低开发者的学习成本，并且提高开发效率

3、常见的模块化规范

3.1 CommonJS

CommonJS主要是Node.js使用，通过 require 同步加载模块， exports 导出内容。在CommonJS规范下，每个JS文件都是独立的模块，都有各自的作用域；可以在任意位置使用require导入，支持循环依赖； 注：浏览器端需要打包使用

// math.js
const PI = 3.1415926
function getSum(a, b) {
  return a + b
}

module.exports.PI = PI
module.exports.getSum = getSum

//main.js
const tool = require("./math")

function sum(){
  console.log(tool)  // { PI: 3.1415926, getSum: [Function: getSum] }
  console.log(tool.getSum(3, 4))  // 7
}

sum()

3.2 AMD (Asynchronous Module Definition)

AMD属于异步加载模块，用于解决浏览器端模块加载问题，因此主要用于浏览器端。通过关键字define定义模块，通过require异步加载

// math.js
define("tool", [], function() {
  const PI = 3.1415926
  function getSum(a ,b) {
    return a + b
  };
  return {
    PI,
    getSum
  }
});

// main.js
require(["tool"], function(tool) {
  console.log(tool.PI)
})

3.3 CMD (Common Module Definition)

CMD属于异步加载模块，同AMD一样主要用于浏览器端使用，也是通过define和require异步加载模块；区别于AMD，CMD推崇依赖就近，而AMD推崇依赖前置

3.4 ESM（ECMAScript Module）

ESM是官方模块化规范，现代浏览器原生支持，通过import加载模块，export导出内容，在node环境同步加载，浏览器端异步加载，支持同步引用

// math.js  
const PI = 3.1415926;  
export const getSum = (a, b) => {  
return a + b;  
};  
  
// main.js  
import * as tool from "./math.js";  
console.log(tool.getSum(4, 5));

前端模块化规范