Home > Developer > JavaScript
In JavaScript, import and require are used for packaging to implement principle analysis. importrequire
Preface:
Previously, I used ES6 to write code. After webpack was packaged, it went online. There was no problem at all. I also read the packaged code. It was a long mess and I didn't dare to see what happened. After loading it, it was enough to run it!
Let's take an example to understand the pre-packaging and post-packaging code!
1. create a folder and create two folders, app folder and public folder. The app folder is used to store raw data and the JavaScript module we will write, the public folder is used to store the files that are subsequently read by the browser (including the js files packaged and generated using webpack and an index.html file ). Next we will create three more files:
Shows the project structure.
Project Structure
We will write the most basic html code in the index.html file, which aims to introduce the packaged js file (Here we name the packaged js file bundle first. js, which will be detailed later ).
<!-- index.html --><!DOCTYPE html>In Greeter. js, we define a function to return html elements containing greeting information, and export this function as a module according to CommonJS specifications:
// Greeter.jsexports.greet= function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet;};exports.USER_INFO = "userInfo";In the main. js file, we write the following code to insert the node 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('div'); greet.textContent = "Hi there and greetings!"; return greet; }; exports.USER_INFO = "userInfo";})]);First, the most layer is the immediate execution of the 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 });Execute function execution now
return __webpack_require__(__webpack_require__.s = 0);That is, execute the first module main. js in the input array.
Mount each module after running
installedModules = {}The current module is required to directly return to the current module. It is not running the code block!Next, change require to import to see how to implement the package.
Modify the Greeter. js information as follows:
// Greeter. jsexport default function () {var greet = document. createElement ('div '); greet. textContent = "Hi there and greetings! "; Return greet ;}; export const USER_INFO =" userInfo "; main. code in the js file. After modification, // main. js import greet, {USER_INFO} from '. /Greeter. js'; console. log (USER_INFO); document. querySelector ("# root "). appendChild (greet ());Then we package 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_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;})]);Summary
The above section describes how to use import and require packaging in JavaScript to analyze the principle. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
