当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript中使用import 和require打包后实现原理分析

JavaScript中使用import 和require打包后实现原理分析

2018年03月19日  | 移动技术网IT编程  | 我要评论

前言:

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

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

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

  • --放在public文件夹中;
  • greeter.js -- 放在app文件夹中;
  • main.js -- 放在app文件夹中;

此时项目结构如下图所示


项目结构

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

<!--  -->
<!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);
})
(
[
(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__) {//模块内容 });

立即执行函数运行执行  return __webpack_require__(__webpack_require__.s = 0);

也就是执行传入数组中的第一个模块main.js

将运行后的每个模块挂载到installedmodules = {}上,当下个需要这个模块直接返回当前模块,不在运行代码块了!

接下来将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;
})]);

总结

以上所述是小编给大家介绍的javascript中使用import 和require打包后实现原理分析，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网