วิธีทำให้ Webpack HMR ทำงานกับ Typescript monorepo บน npm workspace
ฉันกำลังพยายามหาวิธีสลับโปรเจกต์และไลบรารีของเราใน monorepo ของ TypeScript โดยใช้ npm workspace หลังจากเขียนโค้ดบนโครงสร้างทดสอบบางส่วน ฉันสามารถได้วิธีแก้ปัญหาที่ทำงานได้แต่ไม่ค่อยน่าพอใจ โครงสร้างโปรเจกต์เป็นแบบนี้:
Workspace -+-- source(SuperApplication)
|-- ApplicationA
|-- ApplicationB
| ...
|-- ApplicationN
|-- Local_library1
|-- Local_library2
| ...
+-- Local_libraryN
ฉันมีแอปพลิเคชันที่ขึ้นอยู่กับไลบรารีที่ใช้ร่วมกัน ดังนั้นทุกไฟล์ package.json จะมีบางอย่างเช่น:
...
"main": "./dist/esm/xx.js",
"module": "./dist/esm/xx.js",
"types": "./dist/typings/xx.d.ts",
...
"dependencies": {
"@company/local_libraryX": "file:packages/X",
"@company/local_libraryY": "file:packages/Y",
...
"@company/local_libraryZ": "file:packages/Z"
}
...
ในขณะที่ tsconfig.json มี:
...
"incremental": true,
"composite": true,
...
แอปพลิเคชันซุปเปอร์คือแอปพลิเคชันที่ง่ายที่ช่วยให้ผู้ใช้เลือกแอปพลิเคชันที่เขาต้องการ
จริงๆ แล้วทุกแอปพลิเคชันมีการตั้งค่า webpack ของตัวเอง (เนื่องมาจากวิธีการทำงานในอดีต)
น่าเสียดายที่ฉันไม่สามารถทำให้ HMR ทำงานได้เมื่อฉันทำการเปลี่ยนแปลงใน dependencies และฉันต้องสร้าง/โหลดใหม่ทุกครั้ง ฉันกำลังมองหาวิธีที่จะใช้ประโยชน์จาก HMR ในขณะที่ทำการเปลี่ยนแปลงในทุกแอปพลิเคชัน/ไลบรารี ฉันไม่ได้โพสต์โค้ดใด ๆ เพราะคิดว่ามันเกิดจากการตั้งค่าผิดพลาด มีใครสามารถให้คำแนะนำฉันได้บ้างไหม?