In diesem Artikel wird hauptsächlich die Analyse der Prinzipien der Verwendung von Import- und Anforderungsverpackungen in JavaScript vorgestellt. Freunde in Not können sich darauf beziehen
Vorwort:
Ich habe den Code zuvor mit ES6 geschrieben und ihn online ausgeführt. Es war überhaupt kein Problem, und ich habe mich nicht getraut, ihn zu sehen ging weiter. Nach dem Laden lief es!
Lassen Sie uns heute ein Beispiel verwenden, um den Code vor und nach dem Packen zu verstehen!
1 Erstellen Sie einen Ordner und erstellen Sie darin zwei Ordner Der App-Ordner und der öffentliche Ordner werden zum Speichern der Originaldaten und des JavaScript-Moduls verwendet, das wir schreiben werden. Der öffentliche Ordner wird zum Speichern von Dateien verwendet, die vom Browser gelesen werden (einschließlich JS-Dateien, die mithilfe der Webpack-Verpackung und eines Index generiert wurden). .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='root'>
</p>
<script src="bundle.js"></script>
</body>
</html>
Nach dem Login kopieren
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";Nach dem Login kopieren
In der Datei main.js Wir schreiben: Geben Sie den folgenden Code ein, 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 Login kopieren
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";
})
]);Nach dem Login kopieren
Die erste Ebene wird mit der Funktion zur sofortigen Ausführung umschlossen (fetter Inhalt). Der Parameter ist ein Array, und jedes Element im Array ist das entsprechende Modul . Jedes Modul wird in (function(module, exports, __webpack_require__) {//模块内容 });
eingepackt und die Funktion return __webpack_require__(__webpack_require__.s = 0);
besteht darin, das erste Modul main.js im eingehenden Array auszuführen 🎜> wird jedes Modul nach dem Ausführen gemountet
Wenn dieses Modul das nächste Mal benötigt wird, kehrt es direkt zum aktuellen Modul zurück, ohne den Codeblock auszuführen
installedModules = {} Als nächstes ändern Sie die Anforderungen zum Importieren und Anzeigen wie man es nach dem Packen implementiert
Wir haben die Informationen von Greeter.js wie folgt geändert:
// 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
Dann haben wir es erneut gepackt:
(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_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('p');
greet.textContent = "Hi there and greetings!";
return greet;
});;
const USER_INFO = "userInfo";
__webpack_exports__["a"] = USER_INFO;
})]);Nach dem Login kopieren
Das Obige habe ich zusammengestellt Für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Vue2.0-Methode zur Implementierung der Seitennavigations-Eingabeaufforderungsführung
vue2.0 basierend auf dem Statuswert So zeigen Sie Stiländerungen an
So implementieren Sie eine Notizanwendung mit Vuex
Das obige ist der detaillierte Inhalt vonVerwenden von Import und Require in JavaScript, um die Prinzipanalyse nach dem Packen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
