ค้นหาเว็บไซต์

node.js - Typescript + webpack (พร้อมการโหลดร้อน) + NodeJS

เผชิญกับปัญหา - ตั้งค่าโปรโตไทป์บางอย่างของโครงการโดยใช้ TypeScript ซึ่งประกอบด้วยสคริปต์ฝั่งลูกค้าและส่วนเซิร์ฟเวอร์ (NodeJs กับ ExpressJs)

ผมอยากใช้ webpack เป็นตัวรวมไฟล์และใช้ฟีเจอร์ hot reloading เพื่อดูการเปลี่ยนแปลงแบบทันที ตอนแรกผมใช้ react-transform-boilerplate-ts แต่ปัญหาคือจุดเริ่มต้นของเซิร์ฟเวอร์พัฒนาคือไฟล์ js ผมคิดว่าควรจะเป็น ts เพราะผมอยากรวมการตั้งค่าของ express และอื่น ๆ ในนั้น

ดังนั้น มีใครมีโค้ดต้นแบบดี ๆ (ที่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการจัดโครงสร้างโปรเจกต์) สำหรับสร้างโปรเจกต์ที่ประกอบด้วย:

  • ไคลเอนต์ (React) และเซิร์ฟเวอร์ (TypeScript)
  • ส่วนแบ็กเอนด์ใช้ NodeJs และ ExpressJs (typescript)
  • ไคลเอนต์และเซิร์ฟเวอร์รองรับการรีโหลดแบบร้อน (ตามที่ฉันเข้าใจ ตัวเลือกที่ดีที่สุดคือการใช้ตัวเลือก webpack สำหรับการรีโหลด ไม่ใช่งาน gulp ที่รันการเฝ้าดู)

หรือบางทีคุณอาจจะให้คำแนะนำดีๆ กับฉันว่า จะตั้งค่าพวกสิ่งนั้นอย่างถูกต้องได้อย่างไร

ขอบคุณมาก

คำตอบ #1

มีใครมีโค้ดต้นแบบที่ดี (ตามแนวปฏิบัติที่ดีที่สุดในโครงสร้างโปรเจกต์) สำหรับสร้างโปรเจกต์บ้างไหม

นี่คือโปรเจคที่ฉันเปิดซอร์สโค้ด: https://github.com/alm-tools/alm

  • ไคลเอนต์ (React) และเซิร์ฟเวอร์ (TypeScript)

ตรวจแล้ว!

  • ส่วนแบ็กเอนด์ใช้ NodeJs และ ExpressJs (typescript)

เช็ก!

  • ไคลเอนต์และเซิร์ฟเวอร์รองรับการรีโหลดแบบร้อน

ตรวจสอบ! : นี่คือเอกสารที่ช่วยในการมีส่วนร่วม https://github.com/alm-tools/alm/blob/master/docs/contributing/README.md#webpack 🌹

คำตอบ #2

ฉันเพิ่งปล่อยโค้ดสำหรับแอปพลิเคชันจัดการโครงการของฉัน (nodejs/reactjs + redux/การเรนเดอร์เซิร์ฟเวอร์ ฯลฯ) - https://github.com/Brainfock/Brainfock ลองดูนะครับ (มีเดโมออนไลน์ให้ลอง) หวังว่าคุณจะพบสิ่งที่เป็นประโยชน์:

นั่นคือ ดูการตั้งค่า webpack เพื่อดูตัวอย่างที่ดีสำหรับคำถามของคุณ: https://github.com/Brainfock/Brainfock/tree/master/webpack (ผม/ฉันไม่คิดว่าการคัดลอกโค้ดจาก Github เป็นสิ่งจำเป็น)

บทความที่เกี่ยวข้อง