将 Leaflet 地图与 Typescript 一起使用，无法在模块内导入 Leaflet

Question

我目前正在尝试在个人项目中加载传单地图。但由于导入问题，我的代码无法执行。我使用以下命令安装了传单类型定义

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

我遵循传单文档中的基本示例，但我没有编写内联代码，而是创建了一个类。

这是索引的一部分，我在其中加载所有 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，地图可以正常工作。它可能与项目配置/声明/定义/模块内容甚至传单有关。

这是我的 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 文件，在其中放置传单模块的声明，因为在传单之前我尝试使用使用此方法的Google Maps JS API，但它不起作用。

我希望我对问题的描述是详尽的

Answer 1

import该问题很可能是由您的架构中的两种不同用途引起的：

1. 作为 TypeScript 导入（对于库和自动解析的相应类型）
2. 正如浏览器脚本模块导入一样

对于 TypeScript 转译步骤，转译器知道绝对路径（“传单”）可以位于项目的“node_modules”文件夹中。

但浏览器模块导入的情况并非如此：这里您需要指定文件的确切（可能是相对）路径（或至少是模块 package.json 文件的位置），类似于您指定的内容在标签src的属性中<script>。

在这种情况下，您必须修改“导入传单”路径，以便最终的JS文件具有正确的路径。

由于这可能会破坏第 1 步 TypeScript，因此您需要更新 tsconfig 以告诉 TypeScript 如何解析该路径。请参阅TypeScript 导入路径别名

注意：通常这不是问题，因为很少有人真正在浏览器模块导入中使用，而是使用构建引擎（可以包含 TypeScript 转换步骤）将所有 JS捆绑在单个文件中（例如 webpack 或 Rollup），因此解析全部在构建阶段完成，您可以配置所有解析器，以便它们查看您的“node_modules”文件夹（显然是默认行为，因此通常不需要特殊配置）。