使用带有 Typescript 的 Leaflet 映射，无法在模块内导入 Leaflet答案

【问题标题】：Using Leaflet map with Typescript, unable to import Leaflet inside a module使用带有 Typescript 的 Leaflet 映射，无法在模块内导入 Leaflet
【发布时间】：2020-08-08 01:18:53
【问题描述】：

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

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，但它不起作用。

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

【问题讨论】：

import L from 'leaflet'; 不起作用？
@kboul 很遗憾没有，没有默认导出
除了类型之外，您是否安装了传单？你的 package.json 是什么样的？
@ghybs 我已经安装了它，但目前我正试图从他们的存储库下载 CSS 和 JS。我可以尝试让它在本地工作，我会将我的 package.json 添加到我的问题中。我会尽快更新你
甚至通过使用我得到同样的错误。可能是项目设置有问题？

标签： javascript typescript ecmascript-6 leaflet frontend

【解决方案1】：

这个问题很可能是由import 在您的架构中的两种不同用法引起的：

作为 TypeScript 导入（用于库和自动解析的相应类型）
与浏览器脚本模块导入一样

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

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

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

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

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

【讨论】：

非常感谢！你的回答很详尽