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


Posted in Javascript onMarch 07, 2018

前言:

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

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

1.创建文件夹,并在里面创建两个文件夹,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);
})
(
[
(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打包后实现原理分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
详解js闭包
Sep 02 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
js弹出对话框方式小结
Nov 17 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 #Javascript
在vue项目中,使用axios跨域处理
Mar 07 #Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 #Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 #Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 #Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 #Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 #Javascript
You might like
JAVA/JSP学习系列之七
2006/10/09 PHP
php 正则匹配函数体
2009/08/25 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
javascript 写类方式之八
2009/07/05 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
python实现文件快照加密保护的方法
2015/06/30 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
文明寝室申报材料
2014/05/12 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
学习心理学的体会
2014/11/07 职场文书
社区节水倡议书
2015/04/29 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers