1. 为什么需要模块化，有什么优点
若没有模块化，那么一个项目中不同人负责的不同模块可能会出现命名空间污染，若是大型项目，资源引入顺序将是一个巨大的问题
优点：
- 解决命名冲突，代码易维护
- 提高代码复用性
- 多人协作不干扰
- 灵活架构，方便组合、分解
2. 模块化本质
本质上创建了一个函数作用域，每个模块都通过函数封装在自己的局部环境中。
模块与模块之间通过require 接口进行通信，且不用通过暴露在全局环境。
3. webpack实现CommonJS的源码
//定义了一个对象，放模块映射
var __webpack_modules__ = ({
"./src/js/formate.js":
(function (module) {
const dateFormate = (date) => {
return "2023-8-2";
}
const priceFormate = (price) => {
return "100.00";
}
//将导出的变量放入module对象的export中
module.exports = {
dateFormate,
priceFormate
}
})
});
//定义一个对象，作为加载模块的缓存
var __webpack_module_cache__ = {};
//加载模块时，通过该函数加载
function __webpack_require__(moduleId) {
//判断缓存是否已经加载过
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
//给module变量和————__webpack_module_cache__[moduleId]赋值同一个对象
var module = __webpack_module_cache__[moduleId] = {
exports: {}
};
//3. 加载执行模块
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
//4. 导出 module.exports {dateFormat：function priceFormate:function}
return module.exports;
}
var __webpack_exports__ = {};
!function () {
const { dateFormate, priceFormate } = __webpack_require__("./src/js/formate.js")
console.log(dateFormate("abc"));
console.log(priceFormate("xyz"));
}();
4. 模块化实现
__webpack_modules__对象：用文件地址当作键名，存储不同的模块__webpack_module_cache__对象：存储模块导出对象__webpack_require__(moduleId)：访问该模块以及该模块的导出对象，在访问之前会先判断__webpack_module_cache__对象中有没有该模块的导出对象，若有直接返回。
