Heim > Artikel > Web-Frontend > So verwenden Sie Import und Require-Packaging in JS
So verwenden Sie Import und Require-Packaging in JS
- php中世界最好的语言Original
- 2018-03-28 15:17:572876Durchsuche
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 desJavaScript
-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='root'> </p> <script src="bundle.js"></script> </body> </html>
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 Packen mit Webpack:
//main.js
let {greeter,USER_INFO} =require('./Greeter.js');
console.log(USER_INFO);
document.querySelector("#root").appendChild(greeter());
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";
})
]);
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
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 = {}
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());
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;
})]);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!