Home > Article > Web Front-end > Use import and require to package JS

Use import and require to package JS

php中世界最好的语言Original: 2018-03-17 09:59:041778browse

This time I will bring you the use of import and require to package JS, and what are the precautions for using import and require to package JS. The following is a practical case, let's take a look.

Foreword:

I used ES6 to write code before, webpack packaged it and went online. There was no problem at all. I also saw the packaged code. It’s long. It was very messy, and I didn’t dare to look at what was going on. After loading, it can run!

Today I will use an example to understand the code before packaging and after packaging!

1. Create a file 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 module we will write, and the public folder is used to store it for browsing later. Files 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>

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('p');
 greet.textContent = "Hi there and greetings!";
 return greet;
};
exports.USER_INFO = "userInfo";

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('./Greeter.js');
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());

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['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";
})
]);

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. js information is changed to the following:

// Greeter.js
export 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());

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['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_0Greeter_js = webpack_require(1);
  //main.js
  console.log(WEBPACK_IMPORTED_MODULE_0Greeter_js["a"]);
  document.querySelector("#root").appendChild(Object(WEBPACK_IMPORTED_MODULE_0Greeter_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;
})]);

I believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website!

Use import and require to package JS

Related articles