Bower mit Webpack verwenden - Reagieren

9

Vorwort, ich bin mir bewusst, dass ich Bower wahrscheinlich vermeiden sollte und stattdessen NPM verwenden, um alle meine JavaScript-Abhängigkeiten zu verwalten. Ich arbeite jedoch mit altem Code, der Bower stark nutzt, und bis ich alles auf NPM umstellen kann, möchte ich eine funktionierende Version meiner Code-Basis mit Bower und Webpack erhalten.

Ich beachte, dass ich die Konfigurationseinstellungen für die Verwendung von Bower mit Webpack aus dem offiziellen Handbuch befolgt habe: Ссылка

Insbesondere habe ich ein Github Repo eingerichtet, wo ich in der Lage war, bower install jquery und die Konfiguration aus dem offiziellen Handbuch zu verwenden, konnte ich require("jquery") in meinem Quellcode und habe es mit Webpack arbeiten. Da dies für jQuery funktionierte, ging ich davon aus, dass es für andere Bower-Pakete, einschließlich React, funktionieren würde.

Nachdem ich bower install react ausgeführt habe, habe ich versucht, require("react") in meinem Quellcode einzugeben, aber Webpack hat einen Fehler ausgegeben, der besagt: Module not found: Error: Cannot resolve module 'react' in /Users/wmock/Desktop/using-bower-with-webpack/src .

Dies ist mein Github Repo: Ссылка

>

Ich habe 3 Zweige:

  1. Der Zweig "jquery-working" folgt der Konfiguration aus dem offiziellen Handbuch und arbeitet mit jQuery, das über Bower installiert wurde.
  2. Der Zweig "jquery-react-not-working" ist dieselbe Konfiguration wie oben, aber React wurde über Bower installiert. Dies funktioniert nicht.
  3. Der Zweig "master" verfügt über eine funktionierende Version für jQuery und React, die über Bower installiert wurde, ABER folgt nicht den Konfigurationseinstellungen, die in der offiziellen Webpack-Dokumentation angegeben sind.

Frage:

  1. Gibt es eine Möglichkeit, den Zweig "jquery-react-not-working" zum Laufen zu bringen? Mit anderen Worten, gibt es eine Möglichkeit, der offiziellen Dokumentation zu folgen und Bower-Pakete wie React Work with Webpack zu verwenden?
  2. Gibt es irgendwelche Nachteile bei der Verwendung des Ansatzes, der im "master" Zweig spezifiziert wurde? Sollte dies der bevorzugte Weg sein, Bower mit Webpack zu verwenden?

BEARBEITEN (4/12/2016):

  1. Es scheint, als ob DirectoryDescriptionFilePlugin nicht mit einem Array von Dateinamen umgehen kann, weshalb der Zweig "jquery-react-not-working" nicht funktioniert.
  2. Ich würde gerne mehr Antworten für meine zweite Frage hören, aber mein Bauchgefühl sagt mir, dass die Verwendung des im "Master" -Abzweig angegebenen Ansatzes nicht ideal ist, weil: a) Sie jede Bibliothek manuell aliasieren müssen und b) Sie könnte zu Versionskonflikten führen, wenn mehrere Bibliotheken die gleichen zugrunde liegenden Bibliotheken verwenden.
wmock 04.04.2016, 05:29
quelle

2 Antworten

4

jquery-react-not-working-Zweig - DirectoryDescriptionFilePlugin

DirectoryDescriptionFilePlugin kann nicht mit Arrays von Dateinamen umgehen, daher können Sie React und ReactDOM nicht importieren. Sie können ein Plugin wie das Bower Webpack Plugin verwenden, um das Array-Problem zu lösen, aber es importiert nur die erste Datei im Array, und ignoriert den Rest, so kann React importiert werden, aber ReactDOM nicht.

Master-Zweig - Aliasing manuell

Das Aliasing der Dateien selbst funktioniert immer. Der Hauptnachteil ist, dass Sie jede Bowerabhängigkeit manuell aliasieren müssen.

%Vor%

Kombiniere

Sie können die Auflösung von DirectoryDescriptionFilePlugin tatsächlich mit manueller Auflösung über Aliasing kombinieren. Normale Module wie jQuery werden auf offizielle Art und Weise aufgelöst, und Multi-File-Module können mit Aliasing versehen werden:

%Vor%     
Ori Drori 04.04.2016, 20:04
quelle
0

Dies ist ein Problem, da das Beispiel die react-Version 0.10.0 verwendet, aber ab der Version 0.14.0 react als zwei Pakete ausgeliefert wird. In der Konfiguration .bower.json für das react-Paket ist die main -Eigenschaft ein Array und es scheint, dass webpack das nicht mag.

Leider wird im folgenden Problem erläutert, dass es keine Lösung als solche gibt, aber ein Plugin funktioniert: Resolve main Feld als Array für Bower # 4

In den Tiefen dieses Problems habe ich jedoch eine Möglichkeit gefunden, Ihre webpack.config.js zu ändern, wobei Zeile 22 geändert werden kann von:

%Vor%

zu:

%Vor%

, das dann sowohl eine Zeichenkette main als auch ein Array main auflöst, aber nur die erste Komponente. Ich weiß nicht, ob es möglich ist, alle Array-Einträge mit diesem Plugin zu durchlaufen, aber es ist etwas einfacher als das Schreiben eines eigenen. Sie können dem Array keine zusätzlichen Resolver hinzufügen (z. B. um das reac-dom aufzulösen):

... DirectoryDescriptionFilePlugin (". bower.json", ["main", ["main", 0], ["main", 1]])

Wenn Sie also das react-dom-Paket benötigen, müssen Sie möglicherweise einen anderen Weg finden, es zu tun.

    
Neil Twist 08.04.2016 14:51
quelle