Utilisation de import et require en JavaScript pour implémenter l'analyse des principes après l'empaquetage-js tutoriel-php.cn

Utilisation de import et require en JavaScript pour implémenter l'analyse des principes après l'empaquetage

亚连

Libérer： 2018-05-31 17:37:03

original

1978 Les gens l'ont consulté

Cet article présente principalement l'analyse des principes d'utilisation de l'importation et du packaging en JavaScript. Les amis dans le besoin peuvent s'y référer

Avant-propos :

J'ai déjà utilisé ES6 pour écrire du code. Après l'avoir empaqueté avec webpack, je l'ai exécuté en ligne. Il n'y a eu aucun problème. J'ai également vu le code empaqueté et je n'ai pas osé voir quoi. se passait. Après le chargement, il a fonctionné !

Aujourd'hui, utilisons un exemple pour comprendre le code avant et après l'emballage !

1. Créez un dossier et créez-y deux dossiers, le. app et le dossier public. Le dossier app utilise Pour stocker les données originales et le module JavaScript que nous allons écrire, le dossier public est utilisé pour stocker les fichiers qui seront lus par le navigateur (y compris les fichiers js générés à l'aide du packaging webpack et d'un index. fichier .html). Ensuite, nous créons trois autres fichiers :

index.html -- placés dans le dossier public
Greeter.js -- Placez-le dans ; le dossier de l'application ;
main.js -- Placez-le dans le dossier de l'application

À ce stade, la structure du projet est celle indiquée ; ci-dessous Montrant la

Structure du projet

Nous écrivons le code HTML le plus basique dans le fichier index.html, son but ici est d'introduire le fichier js packagé (ici nous d'abord nommez le fichier js packagé bundle.js (nous en parlerons en détail plus tard).

<!-- 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>

Copier après la connexion

Nous définissons une fonction dans Greeter.js qui renvoie un élément html contenant des informations de bienvenue, et exportons cette fonction en tant que module selon la spécification CommonJS :

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

Copier après la connexion

main. js Dans le fichier, nous écrivons le code suivant pour insérer les nœuds renvoyés par le module Greeter dans la page.

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

Copier après la connexion

Après emballage avec 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";
})
]);

Copier après la connexion

La première couche consiste à envelopper la fonction d'exécution immédiate (contenu en gras), le paramètre est un tableau, et chaque élément du tableau est les modules correspondants, chaque module est enveloppé dans (function(module, exports, __webpack_require__) {//模块内容 });

pour exécuter la fonction immédiatement return __webpack_require__(__webpack_require__.s = 0);

, c'est-à-dire pour exécuter le premier module main.js

dans le passé array

Montez chaque module après avoir exécuté installedModules = {} Lorsque ce module sera ensuite nécessaire, il reviendra directement au module actuel sans exécuter le bloc de code !

Ensuite, modifiez le besoin d'importer et de prendre. un aperçu de l'emballage Comment réaliser l'implémentation finale

Nous modifions les informations de Greeter.js comme suit :

// 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());

Copier après la connexion

Ensuite, nous l'emballons à nouveau :

(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;
})]);

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.