Heim >Web-Frontend >js-Tutorial >JavaScript verwendet Import und erfordert Verpackungsbeispiele zum Teilen

JavaScript verwendet Import und erfordert Verpackungsbeispiele zum Teilen

小云云Original: 2018-03-09 09:32:541602Durchsuche

Ich habe zuvor ES6 verwendet, um Code zu schreiben, und habe ihn mit Webpack gepackt. Es gab überhaupt kein Problem. Es war auch sehr chaotisch und ich habe mich nicht getraut zu sehen, was los war Nach dem Laden kann es ausgeführt werden. Dieser Artikel stellt die prinzipielle Analyse der Verwendung von Import und Require in JavaScript vor. Freunde, die es benötigen, können darauf verweisen.

Lassen Sie uns heute ein Beispiel verwenden, um den Code vor und nach dem Packen zu verstehen!

1. Erstellen Sie einen Ordner und zwei Ordner darin, den App-Ordner und den öffentlichen Ordner wird zum Speichern der Originaldaten und der JavaScript-Module verwendet, die wir schreiben werden, und der öffentliche Ordner wird zum Speichern von Dateien verwendet, die vom Browser gelesen werden (einschließlich js-Dateien, die mit Webpack-Paketierung generiert wurden, 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 – Legen Sie es im App-Ordner ab;

Projektstruktur zu diesem Zeitpunkt Wie gezeigt in der Abbildung unten

Projektstruktur

Wir schreiben den grundlegendsten HTML-Code in die Datei index.html. Der Zweck besteht hier darin, die gepackte js-Datei vorzustellen (Hier Wir nennen die gepackte js-Datei zunächst bundle.js und 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(&#39;p&#39;);
 greet.textContent = "Hi there and greetings!";
 return greet;
};
exports.USER_INFO = "userInfo";

In die Datei main.js 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(&#39;./Greeter.js&#39;);
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());

Nach dem Verpacken 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[&#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";
})
]);

Die erste Schicht dient zum Einwickeln der sofortigen Ausführung Funktion (fetter Inhalt), der Parameter ist ein Array, jedes Element im Array ist das entsprechende Modul, jedes Modul ist eingepackt (function(module, exports, __webpack_require__) {//模块内容 });

Führen Sie die Funktion sofort aus return __webpack_require__(__webpack_require__.s = 0);

Das Das heißt, führen Sie das erste Modul main.js

im übergebenen Array aus und mounten Sie jedes Modul nach der Ausführung auf installedModules = {}. Wenn dieses Modul das nächste Mal benötigt wird, kehrt es direkt zum aktuellen Modul zurück, ohne es auszuführen Der Codeblock. Verstanden!

Als nächstes ändern Sie „require to import“ und sehen, wie er nach dem Packen implementiert wird

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

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

Dann verpacken wir es nochmal:

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

Ähnliche Empfehlungen:

Vergleichen Sie Import und Der Unterschied zwischen Anforderung

Beispielfreigabe von Anforderung, Import und Export in JavaScript

Detaillierte Erläuterung von Anforderung, Import und Export in JavaScript

Das obige ist der detaillierte Inhalt vonJavaScript verwendet Import und erfordert Verpackungsbeispiele zum Teilen. 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：Mit Bootstrap zusammenklappbares, gruppiertes Seitennavigationsmenü, CodefreigabeNächster Artikel：Mit Bootstrap zusammenklappbares, gruppiertes Seitennavigationsmenü, Codefreigabe

In Verbindung stehende Artikel

Mehr sehen