javascript - 使用带有 Typescript 的 Leaflet map，无法在模块内导入 Leaflet

Question

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

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 文件的索引的一部分， map 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， map 可以正常工作。它可能与项目配置/声明/定义/模块的东西甚至可能与传单有关。

这是我的 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 的 2 种不同用途引起的。在您的架构中:

作为 TypeScript 导入(对于库和自动解析的相应类型)

如浏览器脚本模块导入

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

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

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

由于这可能会破坏第 1 步 TypeScript，因此您需要更新 tsconfig 以告诉 TypeScript 如何解析该路径。参见例如TypeScript Import Path Alias

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