recherche

Maison >interface Web >js tutoriel >JavaScript utilise l'importation et nécessite le partage d'exemples d'empaquetage

JavaScript utilise l'importation et nécessite le partage d'exemples d'empaquetage

小云云
小云云original
2018-03-09 09:32:541639parcourir

J'ai déjà utilisé ES6 pour écrire du code, je l'ai empaqueté avec webpack et je suis allé en ligne. Il n'y a eu aucun problème. J'ai également vu le code empaqueté et je n'ai pas osé voir ce qui se passait. Après le chargement, il peut fonctionner ! Cet article est principalement destiné à partager avec vous. Cet article présente l'analyse principale de l'utilisation de l'importation et de l'exigence en JavaScript pour implémenter l'empaquetage. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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 dossier de l'application et le dossier public. est utilisé pour stocker les données originales et les modules JavaScript que nous allons écrire, et 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 fichier index.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 ;

Structure du projet à ce moment Comme indiqué dans la figure ci-dessous

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 nommons d'abord le fichier js packagé bundle.js, et 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>

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";

Dans le fichier main.js 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());

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

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

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

Cela c'est-à-dire, exécutez le premier module main.js

dans le tableau transmis et montez chaque module après avoir été exécuté sur installedModules = {} Lorsque ce module sera nécessaire la prochaine fois, il reviendra directement au module actuel sans s'exécuter. le bloc de code. Compris !

Ensuite, modifiez require to import et voyez comment il est implémenté après l'emballage

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

Ensuite, nous 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;
})]);

Recommandations associées :

Comparez l'importation et la différence entre require

Exemple de partage de require, import et export en JavaScript

Explication détaillée de require, import et export en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partage de code du menu de navigation latéral groupé pliable BootstrapArticle suivant：Partage de code du menu de navigation latéral groupé pliable Bootstrap

Articles Liés

Voir plus