webpack - วิธีการดึงเฉพาะประเภทของ TypeScript จากแพ็กเกจ threeJs?

ฉันกำลังสร้างส่วนหน้าด้วย Webpack ที่มีฟังก์ชันของ threeJs ในอดีต ฉันเคยไม่รวม threeJs ในบันเดิลของฉันเพื่อให้มันมีขนาดเล็ก (ฉันใช้ threeJs UMD จากลิงก์ CDN ใน index.html ของฉัน) อย่างไรก็ตามฉันใช้แพ็กเกจ @types/three สำหรับการพิมพ์ชนิดข้อมูล

อย่างไรก็ตาม @types/three ตอนนี้ถูกยกเลิกแล้ว แทนที่จะใช้ three ตอนนี้รวมประเภทโมดูลของตนเอง แต่ตอนนี้ฉันไม่สามารถหาวิธีใช้แพ็กเกจ three เพียงเพื่อประเภทของมันโดยไม่รวมโค้ด threeJs ขนาดใหญ่ทั้งหมดในบันเดิลของฉัน

มีข้อเสนอแนะไหม?

คำตอบ #1

มันถูกเลิกใช้ในตอนแรก แต่ @types/three ตอนนี้เป็นที่ที่สามารถใช้อีกครั้ง การย้ายกลับไปยัง DefinitivelyTyped ทำในเดือนมกราคม 2021

ดังนั้นเพียงแค่เพิ่มประเภทโดยการรัน

npm install -D @types/three

คำตอบ #2

อัปเดต

สิ่งต่าง ๆ ได้เปลี่ยนแปลงไปตามเวลาและวิธีแก้ปัญหาด้านล่างนี้ไม่จำเป็นอีกต่อไป ตรวจสอบคำตอบที่ได้รับการยอมรับใหม่สำหรับวิธีที่ง่ายกว่า ทิ้งคำตอบเดิมไว้เพื่ออนุรักษ์

คำตอบเก่า

ข้อเสนอแนะของฉัน เนื่องจากคุณกำลังใช้ Webpack คือ:

1. เพิ่ม three เป็นการพึ่งพาของโปรเจกต์เพื่อให้คุณสามารถพัฒนาต่อไปได้ตามปกติและใช้ประโยชน์จากประเภทที่รวมมา จากนั้น
2. ยกเว้นมันจากการถูกรวมกับแอปของคุณโดยใช้ Webpack Externals

externals ป้องกันการรวมแพ็กเกจ import บางตัวและแทนที่จะนั้นจะดึงมาใช้งานในขณะรันไทม์

ตามขั้นตอนเดียวกันของตัวอย่างเอกสาร คุณจะได้การตั้งค่าที่คล้ายกับดังต่อไปนี้:

index.html

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r106/three.min.js">
</script>

webpack.config.js

module.exports = {
  //...
  externals: {
    three: 'three'
  }
};

สิ่งนี้ทำให้โมดูลที่ขึ้นอยู่กับ three ไม่เปลี่ยนแปลง เช่น โค้ดที่แสดงด้านล่างยังคงใช้งานได้:

import { Scene } from 'three';

const scene = new Scene();