Ich baue eine isomorphe React / React-Router / Redux / Webpack-Anwendung und versuche serverseitig zu rendern.
Mein Verzeichnis sieht folgendermaßen aus:
%Vor%In meiner Webpack-Konfiguration habe ich Aliase für alle Ordner im Client eingerichtet:
%Vor%Damit kann ich innerhalb des Codes, der von webpack gebündelt wird, Folgendes tun:
%Vor%und dieser Import wird von Webpack gelöst.
Nun muss ich in meinem Server-Code einige meiner Client-Dateien wie routes/index.js importieren, um das Rendering durchzuführen. Das Problem, auf das ich stoße, wenn ich meine routes-Datei importiere, benutzt einen Webpack-Alias zu einer anderen Datei, sagen wir components oder containers , also kann der Knoten js required das System nicht auflösen.
Wie repariere ich so etwas? Ich habe diese Frage angeschaut und es geht darum, im Wesentlichen dieselben Aliase einzurichten existieren im Webpack mit Mock-Require . Aber dann wird das Problem, dass meine routes-Datei alle meine Komponenten importiert, die dann alle Dinge wie Stylesheets, Bilder usw. importieren. Sollte ich dann etwas wie webpack-isomorphe-tools ?
Die Anleitungen, die ich mir angeschaut habe ( this zum Beispiel) sind alle großartig darin zu zeigen, wie serverseitiges Rendering durchgeführt wird, aber keiner von ihnen redet wirklich darüber, wie alle Anforderungen und was nicht gelöst werden sollen.
Nachdem ich mich zwei Tage mit diesem Problem herumgeschlagen hatte, entschied ich mich für babel-plugin-webpack-alias. Was Sie tun müssen , um Pfade damit aufzulösen, ist:
$ npm install --save-dev babel-plugin-webpack-alias path.join() verwenden) Die andere Option, die ich ausprobiert habe, war universal-webpack , aber ich fand es etwas umständlich. Wenn Sie ungefähr sehen möchten, wie die gesamte serverseitige Ladefunktion funktioniert, können Sie dieses Video ansehen.
Versuchen Sie, NODE_PATH zu verwenden. Der Knoten sucht bei Requests immer nach einem Modul in diesem Pfad. Es erlaubt Ihnen, Ihre relativen Pfade wie gewünscht kurz zu machen.
Weitere Informationen finden Sie in den Node.js-Dokumenten .
P.S. Dieses Ding ist sehr empfindlich, also benutze es vorsichtig. Jetzt hängt dein Code eng von der Umgebung ab und kann irgendwo brechen.
Wenn Sie webpack-isomorphe-tools verwenden, wird Ihre Webpack-Konfiguration für Ihre Server-Seite berücksichtigt, wodurch alle Ihre Aliase funktionieren.