How to use import and require to package in JavaScript

This article focuses on "how to use import and require packaging in JavaScript". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use import and require packaging in JavaScript"!

Project structure

We write the most basic html code in the index.html file, which is here to introduce the packaged js file (here we name the later packaged js file bundle.js, which we'll talk about in more detail later).

Sample Project

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

/ / 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] .modules;} 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,' averse, 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 of all, the most important layer is wrapped in the immediate execution function (bold content), the parameter is an array, each item in the array is the corresponding module, and each module is wrapped in (function (module, exports, _ _ webpack_require__) {/ / module content})

Execute function immediately, run return _ _ webpack_require__ (_ _ webpack_require__.s = 0)

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

Mount each module after running to installedModules = {}, when the next needs this module to return directly to the current module, no longer running the code block!

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

Let's change the information for Greeter.js to the following:

/ / Greeter.jsexport default function () {var greet = document.createElement ('div'); greet.textContent = "Hi there and greetings!"; return greet;}; export const USER_INFO = "userInfo"; Code in the main.js file, modified / / main.js import greet, {USER_INFO} from'. / Greeter.js';console.log (USER_INFO); document.querySelector ("# root") .appendChild (greet ())

Then we pack again:

(function (modules) {var installedModules = {}; function _ webpack_require__ (moduleId) {if (installedModules [moduleId]) {return installedModules [moduleId] .modules;} 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,' averse, 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;}). At this point, I believe you have a better understanding of "how to use import and require packaging in JavaScript". You might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!