หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

React-pwa-reference

โครงการหม้อต้มและตัวอย่างอ้างอิงสำหรับ เกี่ยวกับ isomorphic แอปพลิเคชั่นเว็บแบบโปรเกรสซีฟแบบโปรเกรสซีฟ Universal Reactiflux

สรุป

โครงการนี้เป็นวิวัฒนาการของฟลักซ์-ปฏิกิริยา-ตัวอย่างและฟลักซ์-ปฏิกิริยา-example-SW ที่เพิ่มเครื่องมือและองค์กรที่พัฒนาขึ้น มันเป็น PWA อ้างอิงที่ค่อนข้างสมบูรณ์และมีประสิทธิภาพที่ใช้เส้นทางและเนื้อหาที่ขับเคลื่อนด้วยข้อมูลจากบริการที่แนบมา บริการข้อมูลที่ขับเคลื่อนแอพคือ repo gitHub นี้

สิ่งที่จำเป็นต้องมีสิ่งแวดล้อม

แค่โหนด 14+
การพัฒนาการพัฒนาบางอย่างของโครงการนี้มีการติดตั้งแบบไบนารี (ผู้ควบคุมภาพ) ดังนั้น ymmv

กองซ้อน

  • N ODE
  • ด่วน
  • R EACT (Facebook)
  • F Luxible (Yahoo)
  • Sw-Toolbox, SW-Precache (Google)
  • Babel, Gulp, Webpack, Eslint, Mocha/Chai, Sass

การตั้งค่า

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

วิ่ง

ดำเนินการผลิต

npm run build:server && npm start

ดำเนินการพัฒนา

npm run dev

งานพัฒนา

คำสั่งการพัฒนา npm run ทั้งหมด:

สั่งการ คำอธิบาย
build:list ทิ้งต้นไม้งานสร้างสินทรัพย์เพื่อคอนโซล
config:dev ทิ้งการกำหนดค่าการพัฒนาเป็นคอนโซล
config:prod ทิ้งการกำหนดค่าการผลิตเพื่อคอนโซล
dev ผ้าสำลี, สร้างสินทรัพย์, เริ่มเซิร์ฟเวอร์, verbose, node_env = การพัฒนา, ไม่รองรับออฟไลน์
dev:analyze วิเคราะห์ไฟล์สถิติ webpack และการวิเคราะห์ขนาดชุดรวมเป็นคอนโซล
dev:analyzer วิเคราะห์ไฟล์สถิติ webpack ด้วยสายตา
dev:ccss สร้างสินทรัพย์ CSS เฝ้าดูและรวบรวมการเปลี่ยนแปลงใหม่
dev:debug ผ้าสำลี, สร้างสินทรัพย์, เซิร์ฟเวอร์เริ่ม/ดีบัก, node_env = การพัฒนา, รอดีบักเกอร์แนบแนบ
dev:inspect เช่น dev:debug แต่ใช้โหนด -ตรวจสอบ, ที่ดีที่สุด w/node 7+
dev:perf ผ้าสำลี, สร้างสินทรัพย์, สคริปต์ที่มีแผนที่แหล่งที่มา, เริ่มต้นเซิร์ฟเวอร์, node_env = การผลิต, รองรับการสนับสนุน
dev:prod ผ้าสำลี, สร้างสินทรัพย์, เริ่มเซิร์ฟเวอร์, node_env = การผลิต, รองรับออฟไลน์
fixtures:dev สร้างอุปกรณ์ทดสอบจากบริการข้อมูลการพัฒนา
fixtures:prod สร้างอุปกรณ์ทดสอบจากบริการข้อมูลการผลิต
lint เรียกใช้ Linter ในโครงการทั้งหมด
perfbudget ใช้โดย CI เพื่อทดสอบงบประมาณประสิทธิภาพกับบริการ
test เรียกใช้ชุดทดสอบทั้งหมด
test:cover เรียกใช้ชุดทดสอบทั้งหมดการจับภาพและรายงาน
test:debug สร้างด้วยแผนที่ต้นทางเริ่มชุดทดสอบรอดีบักเกอร์แนบแนบ
test:inspect เช่น test:debug แต่ใช้โหนด -ตรวจสอบ, ที่ดีที่สุด w/node 7+
test:func ใช้โดย CI เพื่อเรียกใช้การทดสอบการทำงานกับกริดซีลีเนียม
test:contact ใช้เพื่อทดสอบผู้ติดต่อผู้ติดต่อด้วยตนเองหลังจากอัปเดต Nodemailer

ข้อเท็จจริงสนุก ๆ

  1. webpack.github.io/analyse/#modules ยังคงทำงานบนไฟล์สถิติ webpack เพื่อให้เห็นภาพกราฟการพึ่งพาโมดูล
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด