JavaScript uses import and require packaging examples to share-JS Tutorial-php.cn

JavaScript uses import and require packaging examples to share

小云云

Release： 2018-03-09 09:32:54

Original

1634 people have browsed it

I used ES6 to write code before, and I packaged it with webpack and went 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 can run! This article mainly talks to everyone. This article introduces the principle analysis of using import and require in JavaScript to implement packaging. Friends who need it can refer to it. I hope it can help everyone.

Today we will 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 is used to store the original data and the JavaScript modules we will write, and 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;

Project structure at this time As shown in the figure below

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, and 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 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, each item in the array is the corresponding module, each module is wrapped in (function(module, exports, __webpack_require__) {//Module content});

Immediately execute the function execution 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 = {}. When this module is needed next, it will directly return to the current module without running the code block!

Next, change the require to import to see how it is implemented after packaging

We change the Greeter.js information 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

Related recommendations:

Compare the difference between import and require in Javascript

In Javascript Share examples of require, import and export

Detailed explanation of require, import and export in JavaScript

The above is the detailed content of JavaScript uses import and require packaging examples to share. For more information, please follow other related articles on the PHP Chinese website!