Используя карту Leaflet с Typescript, невозможно импортировать Leaflet внутри модуля - PullRequest
Новая
       29

Используя карту Leaflet с Typescript, невозможно импортировать Leaflet внутри модуля

1 голос
/ 24 апреля 2020

Я сейчас пытаюсь загрузить карту Leaflet в личный проект. но мой код не выполняется из-за проблемы импорта. я установил определения типов листовок с помощью следующей команды 

npm install --save @types/leaflet

она имеет одну зависимость, поэтому я установил geo json тоже 

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"
  ]
}

Я следую примеру basi c в документации листовки, но вместо написания встроенного кода я создал класс.

это часть индекса, где я загружаю все мои js файлы, карта div находится внутри тела (здесь не показано). 

<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

Я также пытался загрузить листовку как модуль 

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

, но он не работал, он дал мне другую ошибку времени выполнения: 

TypeError: t is undefined (inside leaflet.js)

ВАЖНО без использования классы и при использовании встроенного JS внутри индекса карта работает нормально. возможно, это как-то связано с конфигурацией проекта / объявлений / определений / модулей или даже с листовкой.

это часть моего пакета. 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, в который я поместил объявление модуля листовки, потому что перед листовкой я пытался использовать Google Maps JS API, который использует этот метод, но он не работал.

Я надеюсь, что мое описание проблемы было исчерпывающим

1 Ответ

1 голос
/ 25 апреля 2020

Вероятно, проблема вызвана двумя различными вариантами использования import в вашей архитектуре:

  1. В качестве импорта TypeScript (как для библиотеки, так и для автоматически разрешенных соответствующих типов)
  2. Как при импорте модуля скрипта браузера

Для шага транспиляции TypeScript транспортер знает, что абсолютный путь ("листочек") может быть в папке вашего проекта "node_modules".

Но это не относится к импорту модуля браузера: здесь вам нужно указать точный (может быть относительный) путь к вашему файлу (или, по крайней мере, местоположение пакета модуля. json файл), аналогично тому, что вы имели бы указывается в атрибуте src тега <script>.

В этом случае вам необходимо изменить путь к "листовке импорта", чтобы в конечном файле JS был правильный путь.

Поскольку это, вероятно, нарушило бы действие TypeScript шага 1, вам необходимо обновить tsconfig, чтобы сообщить TypeScript, как разрешить этот путь. См., Например, Псевдоним пути импорта TypeScript

Примечание: обычно это не проблема, потому что на самом деле очень мало людей используют импорт модулей браузера, но вместо этого используют механизм сборки (который может охватывать перенос TypeScript шаг) который объединяет все JS в один файл (например, веб-пакет или накопительный пакет), поэтому все разрешение выполняется на этапе сборки, и вы можете настроить все средства распознавания так, чтобы они смотрели в ваши "node_modules" папка (поведение по умолчанию очевидно, поэтому обычно не требуется никакой специальной настройки).

...