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

这篇文章主要介绍了javascript中使用import 和require打包后实现原理分析,需要的朋友可以参考下

前言:

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

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

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

立即学习“Java免费学习笔记（深入）”；

index.html –放在public文件夹中;

Greeter.js — 放在app文件夹中;

main.js — 放在app文件夹中;

此时项目结构如下图所示

项目结构

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

nbsp;html>         
  
   

登录后复制

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

// Greeter.jsexports.greet= function() { var greet = document.createElement('p'); 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('p');    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.jsexport default function() { var greet = document.createElement('p'); 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('p');    greet.textContent = "Hi there and greetings!";    return greet;  });;  const USER_INFO = "userInfo";  __webpack_exports__["a"] = USER_INFO;})]);

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue2.0 实现页面导航提示引导的方法

vue2.0 根据状态值进行样式的改变展示方法

使用Vuex实现一个笔记应用的方法

以上就是JavaScript中使用import 和require打包后实现原理分析的详细内容，更多请关注【创想鸟】其它相关文章！