沁心崖 沁心崖

webpack模块化实现原理

/

一、准备

目录结构：

  1. ├── common_index.js
  2. ├── es_index.js
  3. ├── index.js
  4. └── js
  5.     ├── format.js
  6.     └── math.js

如果有需要源码的，评论或者私信一下，我也不确定有没有人需要，就懒得放了。

二、CommonJS实现原理

去掉所有注释，和一些 外层的立即执行函数后。

  1. // 定义了一个对象
  2. // 模块的路径(key): 函数(value)
  3. var __webpack_modules__ = {
  4.     "./src/js/formate.js": (function (module) {
  5.         const dateFormat = (date) => {
  6.             console.log('2020-1-1');
  7.         }
  8.         const priceFormat = (price) => {
  9.             console.log('100.00');
  10.         }
  11.         // 5.
  12.         // 将我们要导出的其他变量，放入到module对象中的exports对象里
  13.         module.exports = {
  14.             dateFormat,
  15.             priceFormat
  16.         }
  17.     })
  18. };
  20. // 定义了一个对象，作为加载模块的缓存
  21. var __webpack_module_cache__ = {};
  23. // 函数，当我们加载一个模块时，都会通过这个函数来加载
  24. function __webpack_require__(moduleId) {
  25.     var cachedModule = __webpack_module_cache__[moduleId];
  26.     // 2. 判断缓存中是否存在
  27.     if (cachedModule !== undefined) {
  28.         return cachedModule.exports;
  29.     }
  31.     // 3. 给 module对象 和  __webpack_module_cache__[moduleId]  赋值了同一个对象，
  32.     var module = __webpack_module_cache__[moduleId] = {
  33.         exports: {}
  34.     };
  36.     //  4. 加载执行模块
  37.     __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  40.     // 6. 导出 module.exports
  41.     return module.exports;
  42. }
  44. // 
  45. var __webpack_exports__ = {};
  47. // 立即执行函数的变种写法，具体开始执行代码逻辑
  48. ! function () {
  49.     // 1. 加载模块
  50.     const {
  51.         dateFormat,
  52.         priceFormat
  53.     } = __webpack_require__("./src/js/formate.js")
  55.     // 7. 导出
  56.     dateFormat('1')
  57.     priceFormat('1')
  58. }();

三、ESModule实现原理

  1. // 1. 定义了一个对象，对象里边放的是我们的模块映射
  2. var __webpack_modules__ = ({
  3.   "./src/js/math.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
  4.     __webpack_require__.r(__webpack_exports__);
  5.     __webpack_require__.d(__webpack_exports__, {
  6.       "sum": function () {
  7.         return sum;
  8.       },
  9.       "mul": function () {
  10.         return mul;
  11.       }
  12.     });
  13.     const sum = (num1, num2) => {
  14.       return num1 + num2;
  15.     }
  16.     const mul = (num1, num2) => {
  17.       return num1 * num2;
  18.     }
  19.   })
  20. });
  22. // 2.缓存
  23. var __webpack_module_cache__ = {};
  25. // 3. require 函数的实现(加载模块)
  26. function __webpack_require__(moduleId) {
  27.   var cachedModule = __webpack_module_cache__[moduleId];
  28.   if (cachedModule !== undefined) {
  29.     return cachedModule.exports;
  30.   }
  31.   var module = __webpack_module_cache__[moduleId] = {
  32.     exports: {}
  33.   };
  35.   __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  37.   return module.exports;
  38. }
  40. ! function () {
  41.   // 给这个函数对象添加了一个属性， d => funciton
  42.   __webpack_require__.d = function (exports, definition) {
  43.     for (var key in definition) {
  44.       if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  45.         // 做了一个代理，__webpack_modules__  上的方法 代理到 _js_math__WEBPACK_IMPORTED_MODULE_0__
  46.         Object.defineProperty(exports, key, {
  47.           enumerable: true,
  48.           get: definition[key]
  49.         });
  50.       }
  51.     }
  52.   };
  53. }();
  55. ! function () {
  56.   // 给这个函数对象添加了一个属性， o => funciton
  57.   __webpack_require__.o = function (obj, prop) {
  58.     // 判断 obj 对象原生属性上是否具有 prop 属性
  59.     return Object.prototype.hasOwnProperty.call(obj, prop);
  60.   }
  61. }();
  63. ! function () {
  64.   // 给这个函数对象添加了一个属性， r => funciton
  65.   __webpack_require__.r = function (exports) {
  66.     if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  67.       // 增加了一个属性 值是 Module
  68.       Object.defineProperty(exports, Symbol.toStringTag, {
  69.         value: 'Module'
  70.       });
  71.     }
  72.     // 增加了一个属性 值是 __esModule
  73.     Object.defineProperty(exports, '__esModule', {
  74.       value: true
  75.     });
  76.   };
  77. }();
  79. var __webpack_exports__ = {};
  81. ! function () {
  83.   __webpack_require__.r(__webpack_exports__);
  84.   var _js_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/math.js");
  87.   console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.mul(20, 30));
  88.   console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.sum(20, 30));
  90. }();

四、CommonJS和ESModule相互导入原理

  1. var __webpack_modules__ = ({
  2.   "./src/index.js":
  3.     (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
  4.       "use strict";
  5.       __webpack_require__.r(__webpack_exports__);
  6.       var _js_format__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/format.js");
  7.       var _js_format__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_js_format__WEBPACK_IMPORTED_MODULE_0__);
  9.       // es module导出内容, CommonJS导入内容
  10.       const math = __webpack_require__("./src/js/math.js");
  12.       // CommonJS导出内容, es module导入内容
  13.       console.log(math.sum(20, 30));
  14.       console.log(math.mul(20, 30));
  15.       console.log(_js_format__WEBPACK_IMPORTED_MODULE_0___default().dateFormat("aaa"));
  16.       console.log(_js_format__WEBPACK_IMPORTED_MODULE_0___default().priceFormat("bbb"));
  17.     }),
  18.   "./src/js/format.js":
  19.     (function (module) {
  20.       const dateFormat = (date) => {
  21.         return "2020-12-12";
  22.       }
  23.       const priceFormat = (price) => {
  24.         return "100.00";
  25.       }
  26.       module.exports = {
  27.         dateFormat,
  28.         priceFormat
  29.       }
  30.     }),
  32.   "./src/js/math.js":
  33.     (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
  35.       __webpack_require__.r(__webpack_exports__);
  36.       __webpack_require__.d(__webpack_exports__, {
  37.         "sum": function () { return sum; },
  38.         "mul": function () { return mul; }
  39.       });
  40.       const sum = (num1, num2) => {
  41.         return num1 + num2;
  42.       }
  44.       const mul = (num1, num2) => {
  45.         return num1 * num2;
  46.       }
  47.     })
  48. });
  50. var __webpack_module_cache__ = {};
  52. // The require function
  53. function __webpack_require__(moduleId) {
  54.   // Check if module is in cache
  55.   if (__webpack_module_cache__[moduleId]) {
  56.     return __webpack_module_cache__[moduleId].exports;
  57.   }
  58.   // Create a new module (and put it into the cache)
  59.   var module = __webpack_module_cache__[moduleId] = {
  60.     // no module.id needed
  61.     // no module.loaded needed
  62.     exports: {}
  63.   };
  65.   // Execute the module function
  66.   __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  68.   // Return the exports of the module
  69.   return module.exports;
  70. }
  72. !function () {
  73.   // getDefaultExport function for compatibility with non-harmony modules
  74.   __webpack_require__.n = function (module) {
  75.     var getter = module && module.__esModule ?
  76.       function () { return module['default']; } :
  77.       function () { return module; };
  78.     __webpack_require__.d(getter, { a: getter });
  79.     return getter;
  80.   };
  81. }();
  83. /* webpack/runtime/define property getters */
  84. !function () {
  85.   // define getter functions for harmony exports
  86.   __webpack_require__.d = function (exports, definition) {
  87.     for (var key in definition) {
  88.       if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  89.         Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
  90.       }
  91.     }
  92.   };
  93. }();
  95. /* webpack/runtime/hasOwnProperty shorthand */
  96. !function () {
  97.   __webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
  98. }();
  100. /* webpack/runtime/make namespace object */
  101. !function () {
  102.   // define __esModule on exports
  103.   __webpack_require__.r = function (exports) {
  104.     if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  105.       Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  106.     }
  107.     Object.defineProperty(exports, '__esModule', { value: true });
  108.   };
  109. }();
  111. __webpack_require__("./src/index.js");

Reproduced please indicate the author and the source, and error a link to this page.
text link: //v2ci.com/33.html

Next article：Element Form表单布局（一行多列）

Last article：TypeScript-类、继承、接口、泛型、tsconfig