recherche

Maison  >  Article  >  interface Web  >  Utiliser l'importation et exiger l'empaquetage de JS

Utiliser l'importation et exiger l'empaquetage de JS

php中世界最好的语言
php中世界最好的语言original
2018-03-17 09:59:041790parcourir

Cette fois, je vais vous présenter l'utilisation de import et require pour empaqueter JS. Quelles sont les précautions concernant l'utilisation d'import et require pour empaqueter JS. Ce qui suit est un exemple pratique. cas, jetons un coup d'oeil.

Avant-propos :

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 aussi vu le code packagé. C'est très compliqué, et je n'ai pas osé regarder ce qui se passait, mais il peut s'exécuter après le chargement !

Aujourd'hui, je vais utiliser un exemple pour comprendre le. code avant et après l'emballage !

1. Créez un dossier de fichiers et créez-y deux dossiers, le dossier app et le dossier public. Le dossier app est utilisé pour stocker les données originales et le JavaScript<.> module que nous allons écrire, et le dossier public est utilisé pour le stocker pour une navigation ultérieure. Fichiers 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

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

Lorsque ce module sera ensuite nécessaire, il reviendra directement au module actuel sans exécuter le bloc de code !installedModules = {}

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

final Nous modifions les informations Greeter.js comme suit : 

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Effets spéciaux de la barre de navigation étoilée

Comment gérer la superposition d'options de sélection

Plusieurs façons de lier des événements de réaction à cela

String.prototype.format Comment utiliser l'épissage de chaînes

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：Effets spéciaux de la barre de navigation étoiléeArticle suivant：Effets spéciaux de la barre de navigation étoilée

Articles Liés

Voir plus