webpack子產品化實作原理

文章目錄

• 一、準備
• 二、CommonJS實作原理
• 三、ESModule實作原理
• 四、CommonJS和ESModule互相導入原理

一、準備

目錄結構：

├── common_index.js
├── es_index.js
├── index.js
└── js
    ├── format.js
    └── math.js
           

如果有需要源碼的，評論或者私信一下，我也不确定有沒有人需要，就懶得放了。

二、CommonJS實作原理

去掉所有注釋，和一些 外層的立即執行函數後。

// 定義了一個對象
// 子產品的路徑(key): 函數(value)
var __webpack_modules__ = {
    "./src/js/formate.js": (function (module) {
        const dateFormat = (date) => {
            console.log('2020-1-1');
        }
        const priceFormat = (price) => {
            console.log('100.00');
        }
        // 5.
        // 将我們要導出的其他變量，放入到module對象中的exports對象裡
        module.exports = {
            dateFormat,
            priceFormat
        }
    })
};

// 定義了一個對象，作為加載子產品的緩存
var __webpack_module_cache__ = {};

// 函數，當我們加載一個子產品時，都會通過這個函數來加載
function __webpack_require__(moduleId) {
    var cachedModule = __webpack_module_cache__[moduleId];
    // 2. 判斷緩存中是否存在
    if (cachedModule !== undefined) {
        return cachedModule.exports;
    }

    // 3. 給 module對象 和  __webpack_module_cache__[moduleId]  指派了同一個對象，
    var module = __webpack_module_cache__[moduleId] = {
        exports: {}
    };

    //  4. 加載執行子產品
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);


    // 6. 導出 module.exports
    return module.exports;
}

// 
var __webpack_exports__ = {};

// 立即執行函數的變種寫法，具體開始執行代碼邏輯
! function () {
    // 1. 加載子產品
    const {
        dateFormat,
        priceFormat
    } = __webpack_require__("./src/js/formate.js")

    // 7. 導出
    dateFormat('1')
    priceFormat('1')
}();
           

三、ESModule實作原理

// 1. 定義了一個對象，對象裡邊放的是我們的子產品映射
var __webpack_modules__ = ({
  "./src/js/math.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
    __webpack_require__.r(__webpack_exports__);
    __webpack_require__.d(__webpack_exports__, {
      "sum": function () {
        return sum;
      },
      "mul": function () {
        return mul;
      }
    });
    const sum = (num1, num2) => {
      return num1 + num2;
    }
    const mul = (num1, num2) => {
      return num1 * num2;
    }
  })
});

// 2.緩存
var __webpack_module_cache__ = {};

// 3. require 函數的實作(加載子產品)
function __webpack_require__(moduleId) {
  var cachedModule = __webpack_module_cache__[moduleId];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  var module = __webpack_module_cache__[moduleId] = {
    exports: {}
  };

  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  return module.exports;
}

! function () {
  // 給這個函數對象添加了一個屬性， d => funciton
  __webpack_require__.d = function (exports, definition) {
    for (var key in definition) {
      if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
        // 做了一個代理，__webpack_modules__  上的方法 代理到 _js_math__WEBPACK_IMPORTED_MODULE_0__
        Object.defineProperty(exports, key, {
          enumerable: true,
          get: definition[key]
        });
      }
    }
  };
}();

! function () {
  // 給這個函數對象添加了一個屬性， o => funciton
  __webpack_require__.o = function (obj, prop) {
    // 判斷 obj 對象原生屬性上是否具有 prop 屬性
    return Object.prototype.hasOwnProperty.call(obj, prop);
  }
}();

! function () {
  // 給這個函數對象添加了一個屬性， r => funciton
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      // 增加了一個屬性 值是 Module
      Object.defineProperty(exports, Symbol.toStringTag, {
        value: 'Module'
      });
    }
    // 增加了一個屬性 值是 __esModule
    Object.defineProperty(exports, '__esModule', {
      value: true
    });
  };
}();

var __webpack_exports__ = {};

! function () {

  __webpack_require__.r(__webpack_exports__);
  var _js_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/math.js");


  console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.mul(20, 30));
  console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.sum(20, 30));

}();
           

四、CommonJS和ESModule互相導入原理

var __webpack_modules__ = ({
  "./src/index.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      "use strict";
      __webpack_require__.r(__webpack_exports__);
      var _js_format__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/format.js");
      var _js_format__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_js_format__WEBPACK_IMPORTED_MODULE_0__);
      
      // es module導出内容, CommonJS導入内容
      const math = __webpack_require__("./src/js/math.js");

      // CommonJS導出内容, es module導入内容
      console.log(math.sum(20, 30));
      console.log(math.mul(20, 30));
      console.log(_js_format__WEBPACK_IMPORTED_MODULE_0___default().dateFormat("aaa"));
      console.log(_js_format__WEBPACK_IMPORTED_MODULE_0___default().priceFormat("bbb"));
    }),
  "./src/js/format.js":
    (function (module) {
      const dateFormat = (date) => {
        return "2020-12-12";
      }
      const priceFormat = (price) => {
        return "100.00";
      }
      module.exports = {
        dateFormat,
        priceFormat
      }
    }),

  "./src/js/math.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        "sum": function () { return sum; },
        "mul": function () { return mul; }
      });
      const sum = (num1, num2) => {
        return num1 + num2;
      }

      const mul = (num1, num2) => {
        return num1 * num2;
      }
    })
});

var __webpack_module_cache__ = {};

// The require function
function __webpack_require__(moduleId) {
  // Check if module is in cache
  if (__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].exports;
  }
  // Create a new module (and put it into the cache)
  var module = __webpack_module_cache__[moduleId] = {
    // no module.id needed
    // no module.loaded needed
    exports: {}
  };

  // Execute the module function
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  // Return the exports of the module
  return module.exports;
}

!function () {
  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function (module) {
    var getter = module && module.__esModule ?
      function () { return module['default']; } :
      function () { return module; };
    __webpack_require__.d(getter, { a: getter });
    return getter;
  };
}();

/* webpack/runtime/define property getters */
!function () {
  // define getter functions for harmony exports
  __webpack_require__.d = function (exports, definition) {
    for (var key in definition) {
      if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
        Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
      }
    }
  };
}();

/* webpack/runtime/hasOwnProperty shorthand */
!function () {
  __webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
}();

/* webpack/runtime/make namespace object */
!function () {
  // define __esModule on exports
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };
}();

__webpack_require__("./src/index.js");