So integrieren Sie Webpack in eine mehrseitige PHP-Anwendung

Ich arbeite an einer alten Codeigniter-Website, wo die JavaScript-Codebasis unordentlich und schlecht strukturiert ist und ich möchte Webback verwenden, um die Skripts zu verwalten. Mein Ziel wäre es, es zu verwenden, um den Code, den ich habe, zu bündeln und ihn nach und nach zu refaktorisieren, um Module und Importe zu nutzen.So integrieren Sie Webpack in eine mehrseitige PHP-Anwendung

Im Moment verwende ich Gulp bei der Entwicklung (aber vor allem um die Dateien zu minimieren) und Carabiner (eine Codeigniter-Bibliothek), um die Skripte in die Ansichten einzufügen.

Die Skripte, die alle als IIFEs geschrieben sind, sind nicht gebündelt, also habe ich in jeder Controller-Funktion ein Array der Skripte, die auf dieser Seite benötigt werden. Zum Beispiel:

public function homepage() 
{ 
    $this->carabiner->js([ 
     ['libraryThatIOnlyNeedHere.min.js'], 
     ['myscript1.js'], 
     ['myscript2.js'], 
     ['myscript3.js'], 
    ]);

würde Ich mag Webpack verwenden, um eine Reihe von Bundles zu erstellen, so dass ich maximal zwei Dateien auf jeder Seite Laden am Ende: ein für die Bibliotheken und eine für meine Skripte.

Alle praktischen Beispiele, die ich mit Webpack gesehen habe, sind für Single Page Applications, wo es ziemlich einfach ist, alles zusammen zu bündeln.

Was wäre der beste Ansatz in meinem Fall? In Anbetracht der Tatsache, dass der Code immer noch nicht bereit ist, Module und Importe korrekt zu verwenden, soll ich viele Einstiegspunkte in der Webpack-Konfigurationsdatei erstellen, möglicherweise eine für jede Seite und jedes auf dieser Seite benötigte Skript auflisten?

Quelle

2017-11-03 Carlo

Sie müssen für jede Seite ein anderes Paar Bündel erstellen, was ein echter Albtraum sein wird. Als ersten Schritt sollten Sie stattdessen 2 Bundles erstellen, 1 für allgemeine Bibliotheken und 1 für allgemeine Skripts. Dann kann jede einzelne Seite zusätzliche Skripte laden. Andernfalls besteht die einzige Option darin, für jede Route Paare von Bündeln zu haben. – apokryfos

Ein echter Albtraum, weil ich viele Einstiegspunkte definieren muss? Wenn das das Hauptproblem ist, würde ich nichts dagegen haben. Ich denke, es wäre eine Frage von ein paar Stunden – Carlo

Grundsätzlich würde eine Lösung so etwas wie "scripts.bundle.homepage.min.js" und "vendor.bundle.homepage.min.j" (Namen sind hart) und erstellen Dies ist für jede Seite, die JS benötigt. Sie können wahrscheinlich den Benutzungsgulp mit dem Webpack ändern und die Bundles als Teil Ihres Schluckprozesses erstellen. Dann müssten Sie jede Controller-Route ändern, um die Bundles anstelle der rohen Skriptdateien bereitzustellen. – apokryfos

Grundgedanke hinter Webpack ist es, Modulgraphen aus bereitgestellten Quellen zu erstellen und sie dann zu Bündeln zu kombinieren. Wenn Ihr Code keine expliziten Abhängigkeiten aufweist, kann es sinnvoll sein, mit jeder verfügbaren Datei (AMD, CommonJS usw.) ein Modul aus jeder Datei zu erstellen. Sie müssen Modul-IDs erstellen und Abhängigkeiten für jedes Modul definieren. Es kann sich lohnen, zum Beispiel this article zu lesen.

Als Zwischenschritt möchten Sie vielleicht einen Loader wie Require.JS verwenden, um Ihren modularisierten Code zu laden.

Bis dieser Schritt gemacht wird - es wird nicht viel von Webpack verwendet.

Quelle

2017-11-03 10:13:20 Flying

Ich bin mir dessen bewusst, aber ich weiß nicht, ob es sich lohnt, eine neue Technologie (AMD, common etc.) zu verwenden, nur um sie danach zu verwerfen. Außerdem, um sicherzugehen, dass ich verstehe: Wenn ich die Module mit, sagen wir, CommonJS erstelle, sollte ich noch in jeden Controller gehen und die JS-Dateien ändern, die ich einschließe. Wäre es so schlimm, explizite Bundles mit Webpack zu erstellen und den Code nachträglich zu refaktorieren? – Carlo

@Carlo Webpack wird in den Einstiegspunkt schauen, den Sie ihm geben werden und sucht nach Referenzen zu anderen Modulen in der Quelle.Legacy-Code hat offensichtlich keine solchen Referenzen (da sie implizit sind) und daher wird Ihr Bundle aus einzelnen Modulen bestehen - ziemlich nutzlos. Sie müssen webpack mit einer Möglichkeit ausstatten, ein Diagramm von Modulen zu erstellen, indem Sie einen der verfügbaren Ansätze verwenden (AMD, CommonJS, native JS-Module oder etwas anderes, für das webpack loader for). Aber der Schritt zum Erstellen expliziter Abhängigkeiten für jedes Modul ist notwendig. Webpack wird Ihre Module später selbst konvertieren, also keine Sorge – Flying

danke für Ihre Antwort und Info. Ich habe mehr mit den von Ihnen bereitgestellten Informationen geforscht und ich habe diesen Artikel gefunden (https://medium.com/eventmobi/how-to-incremental-switch-to-webpack-203a1b431f7a), der einen Ansatz für den schrittweisen Wechsel zu Webpack beschreibt das scheint perfekt zu meinen Bedürfnissen zu passen – Carlo

So integrieren Sie Webpack in eine mehrseitige PHP-Anwendung

Antwort

Verwandte Themen