Wie verbessere ich CSS-In-Browser-/React-Entwicklungserfahrung ohne Neuaufbau?

Question

Mein Team hat ein altes coffeescript + knockout UI, von dem wir langsam Stücke mit modernem React Code ersetzen. Das Projekt hat ein kompliziertes Build-System, aber wir konnten create-react-app damit verbinden und die gebündelten Dateien in die Haupt-App einfügen. Das funktioniert, aber Umbauten sind teuer.

Wie kann ich unsere Entwicklungserfahrung verbessern, indem wir innerhalb des Browsers alles bearbeiten, was wir können, anstatt auf eine vollständige Neuerstellung bei jeder Änderung zu warten?

In einigen Fällen können wir nur den CRA-Dev-Server verwenden, der großartig ist, aber wir verlassen uns oft auf Styling und Code vom Rest der App, so dass die Arbeit an jeder Komponente in vollständiger Isolation schwierig ist.

Danke!

Answer 1

Für CSS können Sie immer die Dev-Tools Ihres Browsers verwenden, um Stile zu ändern, bis es nett aussieht, dann kopieren Sie von den Entwicklertools zu Ihrer App und müssen nur einmal neu erstellen.

Für JS können Sie Hot Module Replacement (HMR) als Webpack-Plugin (nicht in CRA enthalten, müssen Sie eject).