Ich versuche mit den DLL-Plugins von webpack (Version 1.13) ein DLL-Paket zu erstellen, das alle npm-Module enthält, die ich für meine verschiedenen React-Projekte benötige (preact, preact-compat, redux, react-redux, redux-saga, zusammensetzen). Ich möchte das DLL-Paket, das alle diese npm-Module enthält, über das interne npm-Repo meines Shops verteilen. Mehrere Webanwendungen sollten das DLL-Paket aus dem npm-Repo laden und die darin enthaltenen Module verwenden.
Im Beispiel für die Verwendung von DLLs im Webpack aus dem Webpack Repo auf GitHub , einem Modul Der Name module ist in der Alpha-DLL enthalten. module stammt aus dem Verzeichnis node_modules im Beispielverzeichnis (ein Verzeichnis unterhalb des Verzeichnisses dll).
Das funktioniert, wenn ich das Beispiel im Verzeichnis dll-user mit dem Knoten build.js erstelle und auf dll-user/js/output.js schaue, kann ich diese Zeilen sehen:
/*!*****************************************************************************************!*\
!*** delegated ../node_modules/module.js from dll-reference alpha_e0d5512587ca63cbbd71 ***!
\*****************************************************************************************/
Das Modul namens module ist jedoch nicht wirklich ein richtiges npm-Modul, es ist nur eine Datei namens module.js , die direkt im Verzeichnis node_module sitzt. Ich habe versucht, ein "real world" NPM-Modul, in diesem Fall preact .
Nachdem ich die dll und dll-user Projekte erstellt habe, sehe ich in der output.js Datei, dass der gesamte Code des preact Moduls in der Ausgabe enthalten ist, da keine Delegierung stattfindet.
Wie kann ich das richtig machen? Ist es ein Fehler im Webpack?
Ich habe ein Codebeispiel auf GitHub erstellt, das auf dem Webpack-DLL-Beispiel basiert, das das Problem zeigt: Ссылка
BEARBEITEN :
Ursprünglich habe ich nur das Beispiel gemacht, aber ich hatte keine Ahnung, wie alles verwendet werden sollte. Ich schrieb dies (neuer Inhalt unter dem Block):
Ok, ich denke, ich habe zumindest einen Teil davon. Ich werde dir sagen, was du tun musst, damit dein Beispiel funktioniert.
Es gibt zwei Möglichkeiten, damit es funktioniert:
Entfernen Sie preact von package.json (und node_modules falls erforderlich) des enthaltenden Ordners , d. h. der obersten Ebene. Jetzt haben Sie preact nur im Ordner dll .
Dann ändere den require -Aufruf in example.js in dll-user
Ordner zu
require("../dll/node_modules/preact")
Das sollte funktionieren, ist aber nicht genau das, was wir wollen.
Jetzt ist es umgekehrt. Entfernen Sie preact aus dem Ordner dll , installieren Sie es jedoch nur im Ordner mit .
Führen Sie beide Buildskripts aus und sehen Sie, dass in output.js alles so delegiert ist, wie es sollte, inklusive preact .
Neu:
Ok, also nach ein bisschen mehr stochern hier ist, wie ich denke es funktioniert. (Da wir uns gegenseitig kennen und zusammenarbeiten, würden weniger Wörter ausreichen, aber ich denke, dies könnte auch anderen helfen, wenn ich ein wenig genauer auf Einzelheiten eingehe, also bitte.)
Vorbemerkungen: Ich nehme an, Sie möchten eine DLL-Datei erstellen, die Sie 1) mit npm in das Projekt installieren und 2) mit einem separaten Skript-Tag in Ihren HTML-Code einfügen können. Dieses Skript erstellt bei der Ausführung eine globale Variable, die eine Funktion darstellt, die wiederum von Ihrem Anwendungsskript verwendet wird, um Abhängigkeiten aufzulösen.
Weiter gehe ich davon aus, dass Sie bereits ein Verzeichnis für das DLL-Paket eingerichtet haben mit nur einem package.json und Webpack-ready installiert.
Zuerst erstellen Sie ein webpack.config.js wie folgt:
Erstellen Sie nun das Bündel und sein Manifest mit
%Vor%Die Struktur des dll-Projektordners ist jetzt:
%Vor%Nun haben Sie dieses Paket in ein anderes Projekt, Ihre App, installiert:
%Vor% Dieses webpack.config.js sieht ähnlich (oder ähnlich) wie dieses aus:
In Ihrem index.js , also Ihrem App-Code, benötigen Sie Module, die sich auf diese Weise im dll-Bundle befinden:
Wenn Sie webpack -d ausführen, sehen Sie in der generierten app.js etwa so etwas:
Man könnte fragen: "Warum kann ich nicht einfach meinen Standard verwenden wie require("preact") ?". Die Antwort ist: Sie können, aber. Aber in diesem Fall müssten Sie alle diese Abhängigkeiten, die Sie in Ihrem DLL-Paket haben, auch in Ihrer App installieren auch . Denn in diesem Fall würden Sie den "mapped mode" anstelle des "scoped mode" verwenden (siehe Webpack-Dokumente ).
Im bereichsspezifischen Modus müssen Sie require explizit den Pfad zum Modul relativ zum Manifest angeben. Der Vorteil ist: Sie müssen das Modul nicht installieren (und haben es als eine Abhängigkeit in der package.json ) in Ihrer App.
Im abgebildeten Modus können Sie das Modul wie gewohnt benötigen (so als ob es in den node_module Ihrer App installiert wäre), aber Sie müssen es auch in der dll App installieren. Das liegt daran, dass Webpack zuerst den require -Aufruf auswertet und dann erkennt, dass sich das gleiche Modul ebenfalls im dll-Paket befindet und somit nur einen Alias ("delegiert ...") in die Ausgabe rendert.
Nun denke ich, dass es für beide Modi Anwendungsfälle gibt. Der abgebildete Modus ist cool, wenn Sie nur eine app-lokale DLL erstellen, um Ihre Builds zu beschleunigen. In diesem Fall würden Sie alle Deps installieren und speichern, die sowieso lokal in die DLL gehen. Aber wenn Sie ein DLL-Paket als installierbares Modul erstellen und es zwischen Apps freigeben möchten - und Sie nicht alle Module in der DLL in jeder dieser Apps im Auge behalten möchten - werden Sie höchstwahrscheinlich den Bereich verwenden wollen Modus zahlt den Preis von mehr verbose require Anrufe.
Tags und Links webpack