javascript - การใช้แผนที่ Leaflet กับ Typescript ไม่สามารถนำเข้า Leaflet ภายในโมดูลได้

ตอนนี้ฉันกำลังพยายามโหลดแผนที่ Leaflet ในโปรเจกต์ส่วนตัว แต่โค้ดของฉันไม่สามารถทำงานได้เนื่องจากปัญหาการนำเข้า ฉันได้ติดตั้งการกำหนดประเภทของ Leaflet ด้วยคำสั่งดังต่อไปนี้

npm install --save @types/leaflet

มันมีการพึ่งพาหนึ่งตัว ดังนั้นฉันจึงติดตั้ง geojson ด้วย

npm install --save @types/geojson

นี่เป็นส่วนหนึ่งของไฟล์ tsconfig.json ของฉัน

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "rootDir": ".",
    "outDir": "build",
    "target": "es2018",
    "lib": [
      "es2018",
      "dom"
    ],
    "types": [
      "leaflet",
      "geojson"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

ฉันกำลังทำตามตัวอย่างพื้นฐานในเอกสารของ Leaflet แต่แทนที่จะเขียนโค้ดแบบ inline ฉันได้สร้างคลาสขึ้นมา

นี่คือส่วนหนึ่งของดัชนีที่ฉันโหลดไฟล์ js ทั้งหมดของฉัน div ของแผนที่อยู่ภายใน body (ไม่แสดงที่นี่)

<link rel="stylesheet" type="text/css" href="ts\node_modules\leaflet\dist\leaflet.css">
<script src="ts\node_modules\leaflet\dist\leaflet.js"></script>
<script src="./ts/build/src/mapsmanager.js" type="module"></script>

<script type="module">
  // Import classes
  import { MapsManager } from './ts/build/src/mapsmanager.js';

  initialize();

  function initialize()
  {
    /* ADD MAP SCRIPT */ 
    let mapsman = new MapsManager();
  } 
</script>

นี่คือไฟล์ mapsmanager.ts ของฉันซึ่งฉันได้รับข้อผิดพลาดจากไฟล์นี้

import * as Leaf from 'leaflet';

export class MapsManager
{
/*DO STUFF*/
}

บรรทัดนี้

import * as Leaf from 'leaflet';

ให้ฉันข้อผิดพลาด ระยะเวลาการทำงาน:

TypeError: Error resolving module specifier: leaflet

ฉันก็เคยพยายามโหลด leaflet เป็นโมดูลด้วย

<script src="ts\node_modules\leaflet\dist\leaflet.js" type="module"></script>

แต่ก็ไม่ได้ผล มันทำให้ฉันเกิด ข้อผิดพลาดเวลารันอีกครั้ง:

TypeError: t is undefined (inside leaflet.js)

สำคัญ โดยไม่ใช้คลาสและโดยใช้ JS แบบฝังภายใน index แผนที่ทำงานได้ปกติ น่าจะเกี่ยวกับการตั้งค่า/การประกาศ/การกำหนด/โมดูลของโปรเจกต์ หรือบางทีอาจเกี่ยวกับ leaflet ด้วย

นี่คือส่วนหนึ่งของไฟล์ package.json ของฉัน

  "files": [
    "build",
    "src"
  ],
  "devDependencies": {
    "gts": "^2.0.0",
    "typescript": "~3.8.0",
    "@types/node": "^10.0.3"
  },
  "dependencies": {
    "@types/geojson": "^7946.0.7",
    "@types/leaflet": "^1.5.12",
    "leaflet": "^1.6.0"
  }

ฉันยังได้พยายามที่จะเพิ่มไฟล์ index.d.ts ซึ่งฉันวางการประกาศของโมดูล leaflet เพราะก่อนใช้ leaflet ฉันเคยพยายามใช้ Google Maps JS API ซึ่งใช้วิธีนี้ แต่ก็ไม่ได้ผล

ฉันหวังว่าการอธิบายปัญหาของฉันจะครอบคลุมครบถ้วน

คำตอบ #1

ปัญหานี้มีความเป็นไปได้สูงมากว่าเกิดจากการใช้งาน import ที่แตกต่างกัน 2 แบบในสถาปัตยกรรมของคุณ:

1. ในฐานะที่เป็นการนำเข้า TypeScript (ทั้งสำหรับไลบรารีและประเภทที่ตรงกันที่ถูกแก้ไขโดยอัตโนมัติ)
2. เช่นเดียวกับการนำเข้ามอดูลสคริปต์ในเบราว์เซอร์

สำหรับขั้นตอนการแปลง TypeScript ตัวแปลงสามารถทราบได้ว่าพาธสมบูรณ์ ("leaflet") สามารถอยู่ในโฟลเดอร์ "node_modules" ของโครงการของคุณ

แต่สิ่งนั้นไม่ใช่กรณีสำหรับการนำเข้าโมดูลในเบราว์เซอร์: ที่นี่คุณจะต้องระบุเส้นทางที่แน่นอน (อาจเป็นแบบสัมพัทธ์) ไปยังไฟล์ของคุณ (หรืออย่างน้อยตำแหน่งของไฟล์ package.json ของโมดูล) คล้ายกับสิ่งที่คุณจะระบุในแอตทริบิวต์ src ของแท็ก <script>

ในกรณีนี้ คุณต้องแก้ไขเส้นทางของ "import leaflet" เพื่อให้ไฟล์ JS สุดท้ายมีเส้นทางที่ถูกต้อง

เนื่องจากนั่นอาจจะทำให้ TypeScript ในขั้นตอนที่ 1 เสีย คุณจึงต้องอัปเดต tsconfig ของคุณเพื่อบอก TypeScript ว่าจะแก้ไขพาธนั้นอย่างไร ดูตัวอย่างเช่น TypeScript Import Path Alias

หมายเหตุ: ปกติแล้วนี่ไม่ใช่ปัญหาเพราะมีเพียงไม่กี่คนที่ใช้การนำเข้าโมดูลในเบราว์เซอร์จริง ๆ แต่ใช้เครื่องมือสร้าง (build engine) แทน (ซึ่งสามารถรวมถึงขั้นตอนการแปลง TypeScript) ซึ่ง รวม JavaScript ทั้งหมดไว้ในไฟล์เดียว (เช่น webpack หรือ Rollup) ดังนั้นการแก้ไขปัญหาจะเกิดขึ้นทั้งหมดในขั้นตอนการสร้าง และคุณสามารถกำหนดค่าตัวแก้ไขทั้งหมดให้มองเข้าไปในโฟลเดอร์ "node_modules" ของคุณ (พฤติกรรมเริ่มต้นโดยชัดเจน ดังนั้นปกติไม่จำเป็นต้องมีการกำหนดค่าพิเศษ)