Hinzufügen eines stillen Verbindungspunkts zum Reagieren (create-react-app)

Da die Startseite von silent_renew nur eine einfache HTML-Seite ist, könnten Sie das Webpack umgehen. Legen Sie einfach die folgende Datei in den öffentlichen Ordner. Fügen Sie auch eine Kopie der Bibliothek oidc-client.min.js in denselben Ordner ein.

public / silent_renew.html:

Dies funktioniert auf meiner Website in de develepment config. Für die Produktion configI haben die folgenden im Hinterkopf (habe es noch nicht getestet, aber ich bin ziemlich zuversichtlich, das ist der Weg nach vorne ...)

public / index.js

Sobald create-react-app mehrere Einstiegspunkte unterstützt, hoffe ich, dass dies bald für Unternehmensanmeldeszenarien passiert, dieser Code wird überflüssig.

Wie bereits erwähnt, würde das Ändern der Webpack-Konfiguration von %code% dem Zweck dieses Projekts widersprechen und eine Möglichkeit bieten, mit der Null-Konfiguration zu reagieren.

Ich fürchte, die Lösung wäre, Ihre App zu entfernen, die irreversibel ist.

Nachdem Sie dies getan haben, erstellen Sie das Verzeichnis %code% im Stammverzeichnis Ihres Projekts mit der Datei %code% und %code% , erstellen Sie ein %code% für redux, so wie hier (Sie brauchen wahrscheinlich nicht viel von diesem Zeug, wie Sagen, der Router und Logger-Middleware, einfach nehmen die %code% Logik und Speichererstellung), importiere das Geschäft in die %code% Datei und erstelle ein redux %code% , wie zB dies .

Dann können Sie %code% ändern und dem folgen, was wir im redux-oihc-beispiel webpack conf. Fügen Sie %code% und %code% für %code% und den zusätzlichen Einstiegspunkt hinzu.

Was CRA etwas nervt, ist, dass ihre Webpack-Konfiguration für dev und prod vollständig getrennt ist und keine gemeinsame Erweiterung darstellt. Sie müssen diese Operation sowohl in prod- als auch in dev-Konfigurationen durchführen oder eine andere conf-Datei erweitern, um Redundanz zu vermeiden, wie zB dies zum Beispiel.

Ich würde Ihnen auch raten, ein anderes einfaches Gerüst zu verwenden, CRA ist gut, wenn Sie nichts Besonderes zu tun haben, was Sie wollen (und wahrscheinlich auch mehr in der Zukunft). Durch das Auswerfen werden viele Dateien und Code erstellt, den Sie nicht einmal in Ihrer eigenen Codebasis benötigen. Ein Freund und ich haben einen minimalistischen gemacht, aber ich bin sicher, es gibt viele bessere Alternativen.

Da die Startseite von silent_renew nur eine einfache HTML-Seite ist, könnten Sie das Webpack umgehen. Legen Sie einfach die folgende Datei in den öffentlichen Ordner. Fügen Sie auch eine Kopie der Bibliothek oidc-client.min.js in denselben Ordner ein.

public / silent_renew.html:

Dies funktioniert auf meiner Website in de develepment config. Für die Produktion configI haben die folgenden im Hinterkopf (habe es noch nicht getestet, aber ich bin ziemlich zuversichtlich, das ist der Weg nach vorne ...)

public / index.js

Sobald create-react-app mehrere Einstiegspunkte unterstützt, hoffe ich, dass dies bald für Unternehmensanmeldeszenarien passiert, dieser Code wird überflüssig.

Wie bereits erwähnt, würde das Ändern der Webpack-Konfiguration von create-react-app dem Zweck dieses Projekts widersprechen und eine Möglichkeit bieten, mit der Null-Konfiguration zu reagieren.

Ich fürchte, die Lösung wäre, Ihre App zu entfernen, die irreversibel ist.

Nachdem Sie dies getan haben, erstellen Sie das Verzeichnis silent_renew im Stammverzeichnis Ihres Projekts mit der Datei index.js und index.html , erstellen Sie ein store für redux, so wie hier (Sie brauchen wahrscheinlich nicht viel von diesem Zeug, wie Sagen, der Router und Logger-Middleware, einfach nehmen die loadUser Logik und Speichererstellung), importiere das Geschäft in die src/index.js Datei und erstelle ein redux Provider , wie zB dies .

Dann können Sie config/webpack.config.dev.js ändern und dem folgen, was wir im redux-oihc-beispiel webpack conf. Fügen Sie HtmlWebpackPlugin und CommonsChunkPlugin für silentRenew und den zusätzlichen Einstiegspunkt hinzu.

Was CRA etwas nervt, ist, dass ihre Webpack-Konfiguration für dev und prod vollständig getrennt ist und keine gemeinsame Erweiterung darstellt. Sie müssen diese Operation sowohl in prod- als auch in dev-Konfigurationen durchführen oder eine andere conf-Datei erweitern, um Redundanz zu vermeiden, wie zB dies zum Beispiel.

Ich würde Ihnen auch raten, ein anderes einfaches Gerüst zu verwenden, CRA ist gut, wenn Sie nichts Besonderes zu tun haben, was Sie wollen (und wahrscheinlich auch mehr in der Zukunft). Durch das Auswerfen werden viele Dateien und Code erstellt, den Sie nicht einmal in Ihrer eigenen Codebasis benötigen. Ein Freund und ich haben einen minimalistischen gemacht, aber ich bin sicher, es gibt viele bessere Alternativen.