Using import and require in JavaScript to implement principle analysis after packaging-JS Tutorial-php.cn

Using import and require in JavaScript to implement principle analysis after packaging

亚连

Release： 2018-05-31 17:37:03

Original

1991 people have browsed it

This article mainly introduces the analysis of the principles of using import and require packaging in JavaScript. Friends in need can refer to it

Foreword:

I used ES6 to write code before, and I packaged it with webpack and put it online. There was no problem at all. I also saw the packaged code. It was very messy and I didn’t dare to see what was going on. After loading, it ran!

Today, let’s use an example to understand the code before and after packaging!

1. Create a folder and create two folders in it, the app folder and the public folder. The app folder uses To store the original data and the JavaScript module we will write, the public folder is used to store files that will be read by the browser (including js files generated using webpack packaging and an index.html file). Next we create three more files:

index.html -- placed in the public folder;
Greeter.js -- Place it in the app folder;
main.js -- Place it in the app folder;

The project structure is as shown below Show

Project structure

We write the most basic html code in the index.html file. Its purpose here is to introduce the packaged js file (here we First name the packaged js file bundle.js (we will talk about it in detail later).

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>sample Project</title>
 </head>
 <body>
  <p id=&#39;root&#39;>
  </p>
  <script src="bundle.js"></script>
 </body>
</html>

Copy after login

We define a function in Greeter.js that returns an html element containing greeting information, and export this function as a module according to the CommonJS specification:

// Greeter.js
exports.greet= function() {
 var greet = document.createElement(&#39;p&#39;);
 greet.textContent = "Hi there and greetings!";
 return greet;
};
exports.USER_INFO = "userInfo";

Copy after login

In the main.js file we write Enter the following code to insert the nodes returned by the Greeter module into the page.

//main.js 
 let {greeter,USER_INFO} =require(&#39;./Greeter.js&#39;);
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());

Copy after login

After packaging with 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[&#39;default&#39;];
    }:
    function getModuleExports() {
      return module;
    };
    __webpack_require__.d(getter, &#39;a&#39;, 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(&#39;p&#39;);
    greet.textContent = "Hi there and greetings!";
    return greet;
  };
  exports.USER_INFO = "userInfo";
})
]);

Copy after login

The first layer is wrapped with the immediate execution function (bold content). The parameter is an array, and each item in the array is the corresponding module. Each module is wrapped in (function(module, exports, __webpack_require__) {//module content});

Execute the function immediately return __webpack_require__(__webpack_require__.s = 0 );

That is, execute the first module main.js in the passed array

Mount each module after running to installedModules = {} Above, when this module is needed next time, it will directly return to the current module and no longer run the code block!

Next, change the require to import and see how to implement it after packaging

We will Greeter. The js information is changed to the following:

// Greeter.js
export default function() {
 var greet = document.createElement(&#39;p&#39;);
 greet.textContent = "Hi there and greetings!";
 return greet;
};
export const USER_INFO = "userInfo";
main.js 文件中的代码，修改后
//main.js 
import greet,{USER_INFO} from &#39;./Greeter.js&#39;;
console.log(USER_INFO);
document.querySelector("#root").appendChild(greet());

Copy after login

Then we package it again:

(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[&#39;default&#39;];
    }: function getModuleExports() {
      return module;
    };
    __webpack_require__.d(getter, &#39;a&#39;, 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(&#39;p&#39;);
    greet.textContent = "Hi there and greetings!";
    return greet;
  });;
  const USER_INFO = "userInfo";
  __webpack_exports__["a"] = USER_INFO;
})]);

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

vue2.0 Method to implement page navigation prompt guidance

vue2.0 based on status value Style change display method

How to use Vuex to implement a note application

The above is the detailed content of Using import and require in JavaScript to implement principle analysis after packaging. For more information, please follow other related articles on the PHP Chinese website!