webpack4.0源碼解析之esModule打包分析

時間 2021-02-17

標籤 html node webpack web json 緩存函數 this spa 欄目 HTML 简体版

原文原文鏈接

入口文件index.js採用esModule方式導入模塊文件，非入口文件index1.js分別採用CommonJS和esmodule規範進行導出。html

首先,init以後建立一個簡單的webpack基本的配置,在src目錄下建立兩個js文件（一個主入口文件和一個非主入口文件）和一個html文件,package.json，webpack.config.js公共部分代碼以下：（除JS以外的部分）node

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

{
  "name": "mywebpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "html-webpack-plugin": "4.5.0",
    "webpack": "4.44.2",
    "webpack-cli": "3.3.12"
  }
}

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'none',
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: path.resolve('dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

運行yarn webpack打包以後生成的built.js文件webpack

1 打包以後的js文件是一個匿名函數自調用和一個當前函數調用時傳入的一個對象web

2 這個對象暫且稱之爲模塊定義,它是一個鍵值對json

3 這個對象的鍵名是當前加載模塊的文件名和某個目錄的拼接緩存

4 這個鍵的值就是一個函數,和node.js模塊加載有一些相似,會將被加載模塊中的內容包裹在一個函數中函數

5 這個函數在未來某個時間點上會被調用，同時接收到必定的參數,利用這些參數能夠實現模塊的加載操做ui

CommonJS導出this

//採用esmodule導入
import name from './index1.js'
console.log('我是入口js文件')
console.log(name)

//index1.js 採用CommonJS導出
module.exports="我不是入口文件"

 (function(modules) { // webpackBootstrap
     // 此變量爲緩存區，若是有緩存，從緩存中取，沒緩存添加
     var installedModules = {};
     // The require function
     function __webpack_require__(moduleId) {
         //判斷緩存中是否有對應的輸出
         if(installedModules[moduleId]) {
             return installedModules[moduleId].exports;
         }
          //若是沒有緩存建立一個新的module,針對兩次require的方法調用是不同的
          //由於做用域不一樣
         var module = installedModules[moduleId] = {
             i: moduleId,
             l: false,
             exports: {}
         };
         //改變this指向,調用函數
         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
         // 表示已存在緩存中
         module.l = true;
         // 返回輸出
         return module.exports;
     }
     // 將模塊定義保存一份，經過m屬性掛載到自定義方法
     __webpack_require__.m = modules;
     // 保留緩存
     __webpack_require__.c = installedModules;
     //d方法 getter, 'a', getter
     __webpack_require__.d = function(exports, name, getter) {
        //判斷是否有name屬性，取反表示條件成立
         if(!__webpack_require__.o(exports, name)) {
            //添加a屬性getter方法 而且可枚舉 
             Object.defineProperty(exports, name, { enumerable: true, get: getter });
         }
     };
    //O方法
    __webpack_require__.o = function(object, property) {
        return Object.prototype.hasOwnProperty.call(object, property); 
    };
     // 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 });
     };
     // create a fake namespace object
     // mode & 1: value is a module id, require it
     // mode & 2: merge all properties of value into the ns
     // mode & 4: return value when already ns object
     // mode & 8|1: behave like require
     __webpack_require__.t = function(value, mode) {
         if(mode & 1) value = __webpack_require__(value);
         if(mode & 8) return value;
         if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
         var ns = Object.create(null);
         __webpack_require__.r(ns);
         Object.defineProperty(ns, 'default', { enumerable: true, value: value });
         if(mode & 2 && typeof value != 'string') 
　　　　　　for(var key in value) __webpack_require__.d(ns, key, 
　　　　　　function(key) { return value[key]; }.bind(null, key));
         return ns;
     };
     //n方法 
     __webpack_require__.n = function(module) {
        //module裏面是下面傳遞過來的字符串'我不是入口文件'
         var getter = module && module.__esModule ?
             function getDefault() { return module['default']; } :
            //沒有__esModule因此 return module
             function getModuleExports() { return module; }; 
            //調用d方法 把getter傳入 getter就是上文中的getModuleExports函數
             __webpack_require__.d(getter, 'a', getter);
            //返回getter方法 內部添加了一個a屬性，值爲'我不是入口文件'
            return getter;
     };
     
     // __webpack_public_path__
     __webpack_require__.p = "";
     // Load entry module and return exports
     return __webpack_require__(__webpack_require__.s = "./src/index.js");
 })
/************************************************************************/
 ({

 "./src/index.js":
 (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    //因爲是esModule導入的,因此添加標記代表爲esmodule
    __webpack_require__.r(__webpack_exports__);
    //webpack自定義的名字,調用了webpack內部的__webpack_require__方法
     var _index1_js__WEBPACK_IMPORTED_MODULE_0__ = 
    __webpack_require__(/*! ./index1.js */ "./src/index1.js");
    //把index1.js中的module.exports導出的「我不是入口文件」傳遞給n方法
    var _index1_js__WEBPACK_IMPORTED_MODULE_0___default = 
    __webpack_require__.n(_index1_js__WEBPACK_IMPORTED_MODULE_0__);
        console.log('我是入口js文件')
        //默認打印的爲掛載的default的a(get)方法
        console.log(_index1_js__WEBPACK_IMPORTED_MODULE_0___default.a)
 }),
 "./src/index1.js":
 (function(module, exports) {
     //因爲是commonJS規範導出，因此沒有其餘的操做
    module.exports="我不是入口文件"
 })

 });

針對於上述的代碼主入口文件採用esmodule導入先用r方法標記，調用__webpack_require__方法，把index1.js中的"我不是入口文件",傳遞給n方法，在內部判斷index1.js是否爲esmodule規範導出，若是爲cmj模式導出則var spa

getter=function getModuleExports() { return module; }，以後傳遞getter到d方法，在d方法內部添加a屬性getter方法而且可枚舉，在n方法內部return getter,返回getter方法內部添加了一個a屬性，值爲'我不是入口文件'。

esModule導出

//採用esmodule導入
import index1default,{name} from './index1.js'
console.log('我是入口js文件')
console.log(index1default,'----->',name)

//index1.js 採用esModule導出
export default "我不是入口文件"
export const name="張三"

 (function(modules) { // webpackBootstrap
     // The module cache
     var installedModules = {};
     // The require function
     function __webpack_require__(moduleId) {
         // Check if module is in cache
         if(installedModules[moduleId]) {
             return installedModules[moduleId].exports;
         }
         // Create a new module (and put it into the cache)
         var module = installedModules[moduleId] = {
             i: moduleId,
             l: false,
             exports: {}
         };
         // Execute the module function
         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
         // Flag the module as loaded
         module.l = true;
         // Return the exports of the module
         return module.exports;
     }
     // expose the modules object (__webpack_modules__)
     __webpack_require__.m = modules;

     // expose the module cache
     __webpack_require__.c = installedModules;

     // define getter function for harmony exports
     __webpack_require__.d = function(exports, name, getter) {
         if(!__webpack_require__.o(exports, name)) {
             Object.defineProperty(exports, name, { enumerable: true, get: getter });
         }
     };

     // 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 });
     };

     // create a fake namespace object
     // mode & 1: value is a module id, require it
     // mode & 2: merge all properties of value into the ns
     // mode & 4: return value when already ns object
     // mode & 8|1: behave like require
     __webpack_require__.t = function(value, mode) {
         if(mode & 1) value = __webpack_require__(value);
         if(mode & 8) return value;
         if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
         var ns = Object.create(null);
         __webpack_require__.r(ns);
         Object.defineProperty(ns, 'default', { enumerable: true, value: value });
         if(mode & 2 && typeof value != 'string') 
        for(var key in value) __webpack_require__.d(ns, key, function(key) {
            return value[key]; }.bind(null, key)
        );
         return ns;
     };

     // getDefaultExport function for compatibility with non-harmony modules
     __webpack_require__.n = function(module) {
         var getter = module && module.__esModule ?
             function getDefault() { return module['default']; } :
             function getModuleExports() { return module; };
             __webpack_require__.d(getter, 'a', getter);
            return getter;
     };
     // Object.prototype.hasOwnProperty.call
     __webpack_require__.o = function(object, property) {
        return Object.prototype.hasOwnProperty.call(object, property); 
    };
     // __webpack_public_path__
     __webpack_require__.p = "";
     // Load entry module and return exports
     return __webpack_require__(__webpack_require__.s = "./src/index.js");
 })
/************************************************************************/
 ({
 "./src/index.js":
 (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
//添加r方法標記爲node_modules打包
__webpack_require__.r(__webpack_exports__);
//調用webpack調用的方法__webpack_require__,傳遞參數./src/index1.js
var _index1_js__WEBPACK_IMPORTED_MODULE_0__ = 
__webpack_require__(/*! ./index1.js */ "./src/index1.js");
//採用esmodule導入
console.log('我是入口js文件')
console.log(
_index1_js__WEBPACK_IMPORTED_MODULE_0__["default"],
'----->',
_index1_js__WEBPACK_IMPORTED_MODULE_0__["name"])
 }),

 "./src/index1.js":
 (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
//r方法標記爲esmodule
 __webpack_require__.r(__webpack_exports__);
 //經過d方法掛載name屬性值暫時爲undefined,當代碼運行到下面的const name="張三"時 name的值爲張三
 __webpack_require__.d(__webpack_exports__, "name", function() { return name; });
//賦值一個default屬性值爲我不是入口文件
 __webpack_exports__["default"] = ("我不是入口文件");
//賦值name屬性值爲張三
 const name="張三"
 })
 });

針對於上述的代碼與commonjs規範導出不一樣的是，index1.js文件導出用的esmoudle規範，首先經過r方法標記esmodule，而後經過d方法掛載name屬性導出後面的name值爲張三。

/***********************************************************************************************************************************************************************************************************************************************************/

心若計較，到處都是怨言；心若放寬，時時都是晴天。