suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie import und require, um JS zu verpacken

Verwenden Sie import und require, um JS zu verpacken

php中世界最好的语言
php中世界最好的语言Original
2018-03-17 09:59:041791Durchsuche

Dieses Mal werde ich Ihnen die Verwendung von Import und Require zum Verpacken von JS vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Import und Require zum Verpacken von JS? Fall, werfen wir einen Blick darauf.

Vorwort:

Ich habe zuvor ES6 zum Schreiben von Code verwendet, ihn mit Webpack gepackt und war überhaupt kein Problem Ich habe auch den gepackten Code gesehen. Er war sehr chaotisch und ich habe mich nicht getraut, nach dem Laden zu schauen!

Heute werde ich ein Beispiel verwenden, um den Code vorher zu verstehen nach dem Packen!

1. Erstellen Sie einen Dateiordner und erstellen Sie darin zwei Ordner, den App-Ordner und den öffentlichen Ordner. Der App-Ordner wird zum Speichern der Originaldaten und des JavaScript-Moduls verwendet Wir werden schreiben, und der öffentliche Ordner wird zum Speichern der vom Browser gelesenen Dateien verwendet (einschließlich der mithilfe der Webpack-Verpackung generierten JS-Dateien und einer index.html-Datei). Als nächstes erstellen wir drei weitere Dateien:

  • index.html – im öffentlichen Ordner abgelegt

  • Greeter.js – Ablegen in; der App-Ordner;

  • main.js – Platzieren Sie es im App-Ordner

Zu diesem Zeitpunkt ist die Projektstruktur wie gezeigt Unten wird die

Projektstruktur

angezeigt. Wir schreiben den grundlegendsten HTML-Code in die Datei index.html. Der Zweck besteht hier darin, die gepackte js-Datei vorzustellen (hier haben wir zuerst Benennen Sie die gepackte JS-Datei bundle.js (wir werden später ausführlicher darauf eingehen). 

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

Wir definieren eine Funktion in Greeter.js, die ein HTML-Element mit Begrüßungsinformationen zurückgibt, und exportieren diese Funktion als Modul gemäß der CommonJS-Spezifikation: 

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

main. js In die Datei schreiben wir den folgenden Code, um die vom Greeter-Modul zurückgegebenen Knoten in die Seite einzufügen. 

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

Nach dem Packen mit 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";
})
]);

Die erste Ebene besteht darin, die Funktion zur sofortigen Ausführung zu umschließen (fetter Inhalt), der Parameter ist ein Array und jedes Element im Array Ist Entsprechende Module, jedes Modul ist in (function(module, exports, webpack_require) {//模块内容 });

verpackt, um die Funktion sofort auszuführen return webpack_require(webpack_require.s = 0);

, dh das erste Modul main.js

im übergebenen Zustand auszuführen Array

Mounten Sie jedes Modul, nachdem es ausgeführt wurde installedModules = {} Wenn dieses Modul das nächste Mal benötigt wird, kehrt es direkt zum aktuellen Modul zurück, ohne den Codeblock auszuführen!

Als nächstes ändern Sie die Anforderung zum Importieren und Nehmen ein Blick auf die Verpackung So implementieren Sie das Finale

Wir ändern die Greeter.js-Informationen wie folgt: 

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

Dann verpacken wir es erneut: 

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Spezialeffekte der Sternennavigationsleiste

Wie man mit der Optionsüberlagerung von „select“ umgeht

Mehrere Möglichkeiten, Reaktionsereignisse daran zu binden

String.prototype.format So verwenden Sie String-Spleißen

Das obige ist der detaillierte Inhalt vonVerwenden Sie import und require, um JS zu verpacken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Spezialeffekte der sternenklaren NavigationsleisteNächster Artikel：Spezialeffekte der sternenklaren Navigationsleiste

In Verbindung stehende Artikel

Mehr sehen