JavaScript中使用import 和require打包后实现原理-CSDN博客

前言:

之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行!

今天通过个例子理解一下打包前,和打包后的代码!

创建文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

index.html --放在public文件夹中;
Greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;

此时项目结构如下图所示

项目结构

我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
复制代码

我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js
exports.greet= function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

exports.USER_INFO = "userInfo";
复制代码

main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。

//main.js 
 let {greeter,USER_INFO} =require('./Greeter.js');
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());复制代码

使用webpack打包后:

(function(modules){//=====方法体=========//          
    var installedModules = {};//缓存加载后的模块
   function  __webpack_require__(moduleId) {
        if (installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        };
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        module.l = true;
        return module.exports;
    }
    __webpack_require__.m = modules;
    __webpack_require__.c = installedModules;
    __webpack_require__.d = function(exports, name, getter) {
        if (!__webpack_require__.o(exports, name)) {
            Object.defineProperty(exports, name, {
                configurable: false, 
                enumerable: true,
                get: getter 
            });    
        }   
    };
    __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;
    };
    __webpack_require__.o = function(object, property) {
        return Object.prototype.hasOwnProperty.call(object, property);
    };
    __webpack_require__.p = "";
    return __webpack_require__(__webpack_require__.s = 0);
})( 
//============方法参数========//
//这是自执行函数的方法传参,参数是一个数字包含 main.js模块,Greeter.js模块
[
(function(module, exports, __webpack_require__) {
    //这里是main.js模块
    let {
        greeter,
        USER_INFO
    } = __webpack_require__(1);
    console.log(USER_INFO);
    document.querySelector("#root").appendChild(greeter());
}),

(function(module, exports) {
    // //这里是Greeter.js模块
    exports.greet = function() {
        var greet = document.createElement('div');
        greet.textContent = "Hi there and greetings!";
        return greet;
    };
    exports.USER_INFO = "userInfo";
})
]
);复制代码

首先最为层是包裹着立即执行函数(加粗的内容),参数是一个数组,数组中每一项是对应的模块,每个模块包裹在(function(module, exports, __webpack_require__) {//模块内容});

函数自执行时定义

var installedModules = {};//缓存加载后的模块,再次引入时直接获取
复制代码

定义 function __webpack_require__(){}
挂载静态属性和方法
    __webpack_require__.m = modules;

    __webpack_require__.c = installedModules;

    __webpack_require__.d = function(exports, name, getter) {
        //...  
    };

    __webpack_require__.n = function(module) {
        //...
   };

    __webpack_require__.o = function(object, property) {
        //...
    };

    __webpack_require__.p = "";

复制代码

然后执行:

return __webpack_require__(__webpack_require__.s = 0);复制代码

首先判断缓存 installedModules中没有,创建

var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        };
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);复制代码

执行modules[0].call(...),即执行传入的main.js模块

(function(module, exports, __webpack_require__) {
    //这里是main.js模块
    let {
        greeter,
        USER_INFO
    } = __webpack_require__(1);
    console.log(USER_INFO);
    document.querySelector("#root").appendChild(greeter());
})复制代码

执行时获取 __webpack_require__(1),即执行传入的Greeter.js模块

var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        };
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 复制代码

执行完Greeter模块,return

exports={
    greet:function() {
        var greet = document.createElement('div');
        greet.textContent = "Hi there and greetings!";
        return greet;
    },
   USER_INFO:"userInfo"
}复制代码

接下来将require改为import看看打包后的如何实现

我们将Greeter.js的信息改为如下：

// Greeter.js
export default function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

export const USER_INFO = "userInfo";
复制代码

main.js文件中的代码，修改后

//main.js 
import greet,{USER_INFO} from './Greeter.js';
console.log(USER_INFO);
document.querySelector("#root").appendChild(greet());复制代码

然后我们再次打包:

(function(modules) {
   var installedModules = {};
   function __webpack_require__(moduleId) {
       if (installedModules[moduleId]) {
           return installedModules[moduleId].exports;
       }
       var module = installedModules[moduleId] = {
           i: moduleId,
           l: false,
           exports: {}
       };
       modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
       module.l = true;
       return module.exports;
   }
   __webpack_require__.m = modules;
   __webpack_require__.c = installedModules;
   __webpack_require__.d = function(exports, name, getter) {
       if (!__webpack_require__.o(exports, name)) {
           Object.defineProperty(exports, name, {
               configurable: false,
               enumerable: true,
               get: getter
           });
       }
   };

   __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;
   };

   __webpack_require__.o = function(object, property) {
       return Object.prototype.hasOwnProperty.call(object, property);
   };

   __webpack_require__.p = "";
  return __webpack_require__(__webpack_require__.s = 0);
})(

[
(function(module, __webpack_exports__, __webpack_require__) {
   "use strict";
   Object.defineProperty(__webpack_exports__, "__esModule", {
       value: true
   });
   var __WEBPACK_IMPORTED_MODULE_0__Greeter_js__ = __webpack_require__(1);
   //main.js
   console.log(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["a"]);
   document.querySelector("#root").appendChild(Object(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["b"])());
}),

(function(module, __webpack_exports__, __webpack_require__) {

   "use strict";
   __webpack_exports__["b"] = (function() {
       var greet = document.createElement('div');
       greet.textContent = "Hi there and greetings!";
       return greet;
   });;

   const USER_INFO = "userInfo";
   __webpack_exports__["a"] = USER_INFO;
})]

);复制代码

可以发现执行过程和上面require一样,先 __webpack_require__(__webpack_require__.s = 0)

即执行main.js模块:

function(module, __webpack_exports__, __webpack_require__) {
   "use strict";
   Object.defineProperty(__webpack_exports__, "__esModule", {
       value: true
   });
   var __WEBPACK_IMPORTED_MODULE_0__Greeter_js__ = __webpack_require__(1);
   //main.js
   console.log(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["a"]);
   document.querySelector("#root").appendChild(Object(__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["b"])());
}复制代码

区别:

与require不同的是新增__esModule属性,表明是js export定义的模块,引入方式也是不同的

require引入的直接是整个module.exports对象,每次都是先整体引入对象,定义变量获取里面的属性

import 直接获取__WEBPACK_IMPORTED_MODULE_0__Greeter_js__["a"]属性值

相同点:

编译前:都是先将没给模块头尾包装,进行作用域隔离,通过传入module,module.exports,require做为参数调用获取模块,并缓存模块

(function(module, __webpack_exports__, __webpack_require__) {
    //模块代码
 })复制代码