react pwa reference

React-PWA-Referenz

Ein Projektkessel und ein Referenzbeispiel für isomorph Universal Reactiflux Progressive Webanwendungen.

Zusammenfassung

Dieses Projekt ist eine Entwicklung von Flux-React-Example und Flux-React-Example-SW, die entwickelte Werkzeuge und Organisation hinzufügt. Es ist eine ziemlich vollständige, leistungsfähige Referenz-PWA, die datengesteuerte Routen und Inhalte aus einem angehängten Dienst verwendet. Der Datenservice, der die App fährt, ist dieses GitHub -Repo.

Umweltvoraussetzungen

Nur Knoten 14+
_{^{Einige Entwicklungsabhängigkeiten dieses Projekts haben binäre Installationen (Bildmanipulatoren), also ymmv.}}

Stapel

• N ode
• Äußern
• R eact (Facebook)
• F luxibel (yahoo)
• SW-Toolbox, SW-Precache (Google)
• Babel, Schluck, Webpack, Eslint, Mokka/Chai, Sass

Aufstellen

1. git clone https://github.com/localnerve/react-pwa-reference
2. npm install

Laufen

Produktion betreiben

npm run build:server && npm start

Entwicklung der Entwicklung

npm run dev

Entwicklungsaufgaben

Alle npm run -Laufentwicklungsbefehle:

Befehl	Beschreibung
build:list	Lassen Sie den Asset Build -Task -Baum in die Konsole ab
config:dev	Lassen Sie die Entwicklungskonfiguration in die Konsole ab
config:prod	Lassen Sie die Produktionskonfiguration in die Konsole ein
dev	Lint, Erstellen von Assets, starten
dev:analyze	Analysieren Sie die Datei der Webpack -Statistik -Datei und Dump -Bündelgrößenanalyse auf die Konsole
dev:analyzer	Analysieren Sie die Webpack -Statistikdatei visuell
dev:ccss	Bauen Sie CSS -Vermögenswerte, Beobachten und Neukompilien von Sass beim Wandel
dev:debug	Lint, Build Assets, Start/Debugg -Server, node_env = Entwicklung, Wartedebugger beibringen
dev:inspect	Wie dev:debug , aber verwenden
dev:perf	Lint, Erstellen von Assets, Skripten mit Quellkarten, Startserver, node_env = Produktion, offline unterstützt
dev:prod	Lint, Build Assets, Startserver, node_env = Produktion, offline unterstützt
fixtures:dev	Erstellen Sie Testvorrichtungen aus Data Service, Entwicklung
fixtures:prod	Erstellen Sie Testvorrichtungen aus Data Service, Produktion, Produktion
lint	Führen Sie ein Linter für das gesamte Projekt aus
perfbudget	Wird von CI verwendet, um das Leistungsbudget gegen den Dienst zu testen
test	Führen Sie die gesamte Testsuite aus
test:cover	Führen Sie die gesamte Testsuite aus, erfassen Sie die Abdeckung und berichten Sie
test:debug	Erstellen Sie mit Quellkarten, starten Sie die Testsuite, Warten Sie Debugger Attach
test:inspect	Wie test:debug , aber verwenden Sie den Knoten -unbefriedigend, am besten mit Knoten 7+
test:func	Wird von CI verwendet, um Funktionstests gegen Selenraster durchzuführen
test:contact	Verwenden Sie, um den Kontaktarbeiter nach dem Update von NodeMailer manuell zu testen

Lustige Fakten

1. webpack.github.io/analyse/#modules funktioniert weiterhin in Webpack -Statistikdateien, um das Modulabhängigkeitsgraphen zu visualisieren.