react pwa reference

React-PWA-Reference

Proyek boilerplate dan contoh referensi untuk isomorfis Aplikasi Web Progresif Universal Reaktiflux.

Ringkasan

Proyek ini adalah evolusi fluks-react-example dan flux-react-example-SW yang menambahkan perkembangan dan organisasi yang berkembang. Ini adalah Referensi PWA yang agak lengkap dan berkinerja yang menggunakan rute dan konten berbasis data dari layanan terlampir. Layanan data yang mendorong aplikasi ini adalah repo github ini.

Prasyarat lingkungan

Just Node 14+
_{^{Beberapa dependensi pengembangan dari proyek ini memiliki instalasi biner (manipulator gambar), jadi YMMV.}}

Tumpukan

• N ode
• Cepat
• R acact (Facebook)
• F luxible (yahoo)
• SW-Toolbox, SW-Precache (Google)
• Babel, Gulp, Webpack, Eslint, Mocha/Chai, Sass

Pengaturan

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

Berlari

Jalankan produksi

npm run build:server && npm start

Jalankan pengembangan

npm run dev

Tugas pengembangan

Semua perintah pengembangan npm run :

memerintah	keterangan
build:list	buang aset membangun pohon tugas ke konsol
config:dev	buang konfigurasi pengembangan ke konsol
config:prod	buang konfigurasi produksi ke konsol
dev	serat, membangun aset, memulai server, verbose, node_env = pengembangan, offline tidak didukung
dev:analyze	Analisis file statistik webpack dan analisis ukuran bundel dump ke konsol
dev:analyzer	menganalisis file statistik webpack secara visual
dev:ccss	Bangun aset CSS, perhatikan dan kompilasi ulang pada perubahan
dev:debug	server lint, build, server start/debug, node_env = pengembangan, tunggu debugger lampirkan
dev:inspect	Like dev:debug , tapi gunakan node -incecpe, terbaik w/node 7+
dev:perf	serat, membangun aset, skrip dengan peta sumber, Mulai server, node_env = produksi, didukung offline
dev:prod	Serat, Bangun Aset, Mulai Server, Node_env = Produksi, Offline Didukung
fixtures:dev	Bangun perlengkapan uji dari layanan data, pengembangan
fixtures:prod	Bangun perlengkapan uji dari layanan data, produksi
lint	Jalankan linter di seluruh proyek
perfbudget	Digunakan oleh CI untuk menguji anggaran kinerja terhadap layanan
test	Jalankan seluruh suite tes
test:cover	Jalankan seluruh suite tes, tangkap cakupan, dan laporkan
test:debug	Bangun dengan peta sumber, mulailah suite tes, tunggu debugger lampirkan
test:inspect	Like test:debug , tetapi gunakan node -inspect, terbaik w/node 7+
test:func	Digunakan oleh CI untuk menjalankan tes fungsional terhadap selenium grid
test:contact	Gunakan untuk menguji secara manual pekerja kontak setelah pembaruan nodemailer

Fakta yang menyenangkan

1. webpack.github.io/analyse/#modules masih berfungsi pada file statistik webpack untuk memvisualisasikan grafik ketergantungan modul.