ESM 模組原理

console.log('start require');
let module = require('./module');
console.log('end require', module);
// module.js 知識點1
console.log(module.tencent);

// module.js 知識點2
module.additional = 'test';

console.log('this is a module');

exports.app = { hello: 'haha' };

exports.tencent = function () {
  console.log('good');
};

// 知識點1：對module.exports賦值，exports物件就不再是外部require所得到的結果了。
// 我在視頻中採用的說法是「覆蓋exports」其實不算非常嚴謹。
// 因為exports變數本身還是存在的
module.exports = function () {
  console.log('hello app');
};

// 知識點2：外部取得require呼叫的結果和這裡的exports物件是同一個引用
setTimeout(() => {
  // 驗證index.js裡加的additional屬性是否生效
  // 用於確定外部require到的物件和此處的exports是否是同一個屬性
  console.log(exports);
}, 2000);

/******/ (() => {
  // webpackBootstrap
  /******/ let __webpack_modules__ = {
    /***/ './module.js':
    /*! ****************!*\
  !*** ./module.js ***!
  \****************/
    /***/ (module, exports) => {
      console.log('this is module');
      exports.app = { hello: 'haha' };
      exports.tencent = function () {
        console.log('good');
      };
      module.exports = function () {
        console.log('hello app');
      };
      setTimeout(() => {
        console.log(exports);
      }, 2000);

      /***/
    },

    /******/
  };
  /************************************************************************/
  /******/ // The module cache
  /******/ let __webpack_module_cache__ = {};
  /******/
  /******/ // The require function
  /******/ function __webpack_require__(moduleId) {
    /******/ // Check if module is in cache
    /******/ let cachedModule = __webpack_module_cache__[moduleId];
    /******/ if (cachedModule !== undefined) {
      /******/ return cachedModule.exports;
      /******/
    }
    /******/ // Create a new module (and put it into the cache)
    /******/ let 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;
    /******/
  }
  /******/
  /************************************************************************/
  let __webpack_exports__ = {};
  // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
  (() => {
    /*! ******************!*\
  !*** ./index.js ***!
  \******************/
    console.log('start require');
    let module = __webpack_require__(/*! ./module */ './module.js');
    console.log('end require', module);
    console.log(module.tencent);
    module.additional = 'test';
  })();

  /******/
})();