So verwenden Sie Import und Require-Packaging in JS-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie Import und Require in JS verwenden Schauen Sie mal rein.

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).

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:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Nach dem Packen mit Webpack:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

verpackt, um die Funktion sofort auszuführen (function(module, exports, webpack_require) {//模块内容 });

, dh das erste Modul main.js return webpack_require(webpack_require.s = 0); im übergebenen Zustand auszuführen Array

Mounten Sie jedes Modul, nachdem es ausgeführt wurde

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 erreichen Sie die endgültige ImplementierunginstalledModules = {}

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

Dann verpacken wir es erneut:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Empfohlene Lektüre:

So ändern Sie den Wert in Vue-Anfragedaten

Wie JQuery den in der angegebenen Wert auswählt Komponente auswählen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Import und Require-Packaging in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!