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:
Frage:
BEARBEITEN (4/12/2016):
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.
Das Aliasing der Dateien selbst funktioniert immer. Der Hauptnachteil ist, dass Sie jede Bowerabhängigkeit manuell aliasieren müssen.
%Vor%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%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.
Tags und Links javascript jquery reactjs webpack bower