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

วิธีทำให้ 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 ในขณะที่ทำการเปลี่ยนแปลงในทุกแอปพลิเคชัน/ไลบรารี ฉันไม่ได้โพสต์โค้ดใด ๆ เพราะคิดว่ามันเกิดจากการตั้งค่าผิดพลาด มีใครสามารถให้คำแนะนำฉันได้บ้างไหม?

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