Dieser Artikel stellt hauptsächlich das Prinzip und die Implementierung der Webpack-Organisationsmodul-Verpackungsbibliothek vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.
In einem früheren Artikel wurden die Grundprinzipien der Webpack-Packung von JS-Modulen analysiert. Der vorgestellte Fall ist die häufigste Situation, dh mehrere JS-Module und ein Einstiegsmodul werden in eine Bundle-Datei gepackt, die direkt ausgeführt werden kann Durch einen Browser oder eine andere JavaScript-Engine entspricht dies einer direkten Kompilierung zum Generieren einer vollständigen ausführbaren Datei. Es gibt jedoch noch eine weitere sehr häufige Situation: Wir möchten beispielsweise eine JavaScript-Bibliothek erstellen und veröffentlichen. Wenn Sie beispielsweise Ihre eigene Bibliothek in der npm-Community veröffentlichen, muss Webpack entsprechend konfiguriert werden und der kompilierte Code unterscheidet sich geringfügig .
Wie der vorherige Artikel analysiert dieser Artikel hauptsächlich den generierten Code von Webpack und kombiniert ihn, um die spezifische Rolle der Bibliothekskonfigurationsoptionen von Webpack beim Kompilieren der Bibliothek zu erläutern. Die entsprechende offizielle Dokumentation finden Sie hier.
Bibliothek zum Schreiben von JS
Beginnen wir mit einem einfachen Fall. Wir schreiben einfach eine einfache Bibliothek util.js:
import $ from 'jquery'
function sayHello() {
console.log("Hello");
}
function hideImages() {
$('img').hide();
}
export default {
sayHello: sayHello,
hideImages: hideImages
}Nach dem Login kopieren
bietet zwei Funktionen, die natürlich nichts miteinander zu tun haben und eigentlich keinen Nutzen haben. Sie dienen lediglich der Unterrichtsreferenz. . .
Als nächstes schreiben Sie die Webpack-Konfiguration:
// 入口文件
entry: {
util: './util.js',
}
// 输出文件
output: {
path: './dist',
filename: '[name].dist.js'
}Nach dem Login kopieren
Aber das allein reicht nicht aus, die Ausgabedatei ist eine Funktion, die sofort ausgeführt wird. Endlich , die Exporte von util.js werden zurückgegeben. Die endgültige generierte Bundle-Codestruktur sieht ungefähr so aus:
(function(modules) {
var installedModules = {};
function webpack_require(moduleId) {
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,
'/path/to/jquery.js': generated_jquery
});Nach dem Login kopieren
Wenn die Ausführung abgeschlossen ist, geben wir einfach den Exportteil von util.js zurück. Wir müssen diesen Rückgabewert an module.export der kompilierten Datei übergeben, damit die kompilierte Datei zu einer Datei wird, die ausgeführt werden kann von anderen importiert. Die kompilierte Datei, die wir zu erhalten hoffen, sollte also wie folgt aussehen:
module.exports = (function(modules) {
var installedModules = {};
function webpack_require(moduleId) {
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,
'/path/to/jquery.js': generated_jquery
});Nach dem Login kopieren
Um ein solches Ergebnis zu erhalten, müssen die Bibliotheksinformationen zum Ausgabeteil von hinzugefügt werden die Webpack-Konfiguration:
// 入口文件
output: {
path: './dist',
filename: '[name].dist.js',
library: 'util',
libraryTarget: commonjs2
}Nach dem Login kopieren
Das Wichtigste hier ist das Bibliotheksziel. Da wir nun das commonjs2-Format verwenden, erhalten wir die oben genannten Kompilierungsergebnisse dass Webpack die Bibliothek verwendet, um die endgültige Ausgabe in das CommonJS-Formular zu konvertieren, wodurch die Veröffentlichung einer Bibliothek realisiert wird.
Andere Veröffentlichungsformate
Zusätzlich zu commonjs2 verfügt LibraryTarget über weitere Optionen:
var (默认值，发布为全局变量)
commonjs
commonjs2
amd
umd
Nach dem Login kopieren
Kompilieren Sie die Dateien mit verschiedenen Optionen kann in verschiedenen JavaScript-Ausführungsumgebungen verwendet werden. Hier sehen wir direkt, wie die Ausgabe des Tiger Balm umd-Formats aussieht:
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object') // commonjs2
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("util", [], factory); // amd
else if(typeof exports === 'object')
exports["util"] = factory(); // commonjs
else
root["util"] = factory(); // var
}) (window, function() {
return (function(modules) {
var installedModules = {};
function webpack_require(moduleId) {
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,
'/path/to/jquery.js': generated_jquery
});
}Nach dem Login kopieren
ist viel komplizierter als die vorherige commonjs2-Situation, da verschiedene Dinge verarbeitet werden müssen Es gibt verschiedene Fälle, aber tatsächlich sind die folgenden Teile gleich. Das Wichtigste sind die ersten Zeilen. Dies ist die Standardmethode zum Schreiben des umd-Moduls. Es führt die übergebene Factory-Funktion aus, bei der es sich tatsächlich um die Funktion handelt, die das Modul lädt, und übergibt dann das zurückgegebene Ergebnis entsprechend den verschiedenen Betriebsumgebungen an das entsprechende Objekt. Beispielsweise legt var das Ergebnis als globale Variable fest, die vom Browser verwendet wird, um die JS-Datei direkt über das Tag
