javascript - Typescript 自动生成的 JS 文件 : "Uncaught TypeError: Failed to resolve module specifier"

Question

目前正在开发一个 Blazor 项目，我需要高级映射功能，使用带有 typescript 绑定(bind)的 Leaflet.js 库。

我添加了传单和@types/leaflet 作为允许 typescript 支持的节点模块。

一切就绪并运行后，浏览器控制台显示以下错误:

未捕获的类型错误:无法解析模块说明符“leaflet”。相对引用必须以“/”、“./”或“../”开头。

在JS文件顶部生成一行:

import * as L from 'leaflet';

如果我删除此行，一切正常，但我无法手动删除它，因为它是从我的 TS 文件中需要的地方自动生成的。

我怀疑我的错误在 tsconfig 中，或者在 typescript 文件本身中。

配置文件:

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "strict": true,
    "rootDir": "typescript",
    "outDir": "wwwroot/scripts",
    "esModuleInterop": true,
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
}

typescript 文件:

import * as L from 'leaflet'

let map: L.Map;
let apiKey: string = "";
let mapStyle: string = 'saitken88/cl2vcjae400aw14qoiawg02c8'
let centreLatLong: L.LatLngExpression = [51.509865, -0.118092];

let mapOptions: L.MapOptions = {
    minZoom: 6,
    maxZoom: 9,
    center: centreLatLong,
    zoom: 6,
    attributionControl: false,
};

function initMap(mapId: string) {
    console.log('init map');
    map = L.map(mapId, mapOptions).setView(centreLatLong, 13);

    L.tileLayer(`https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}`, {
        maxZoom: 18,
        id: mapStyle,
        tileSize: 512,
        zoomOffset: -1,
        accessToken: apiKey,
    }).addTo(map);
}

编译后的JS文件:

import * as L from 'leaflet';
let map;
let apiKey = "";
let mapStyle = 'saitken88/cl2vcjae400aw14qoiawg02c8';
let centreLatLong = [51.509865, -0.118092];
let mapOptions = {
    minZoom: 6,
    maxZoom: 9,
    center: centreLatLong,
    zoom: 6,
    attributionControl: false,
};
function initMap(mapId) {
    console.log('init map');
    map = L.map(mapId, mapOptions).setView(centreLatLong, 13);
    L.tileLayer(`https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}`, {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: mapStyle,
        tileSize: 512,
        zoomOffset: -1,
        accessToken: apiKey,
    }).addTo(map);
}
//# sourceMappingURL=property-map.js.map

index.html 脚本:

    <script src="scripts/maps/leaflet.js" type="module"></script>
    <script src="scripts/maps/property-map.js" type="module"></script>

不确定是否需要，但这是我的 packake.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "type": "module",
  "devDependencies": {
    "@types/leaflet": "^1.7.9"
  },
  "dependencies": {
    "leaflet": "^1.8.0"
  }
}

我知道 webpack 在这里可能是一个解决方案，并且已经尝试过，但坦率地说，仅仅让一个 typescript 文件很好地编译似乎过于麻烦。

Answer 1

TypeScript 编译器 ( tsc ) 本身不执行任何捆绑(通常与 webpack 相反)。它编译每个 *.ts单独归档，并输出对应的*.js代表他们每个人的文件，不触及导入路径。

因此你的 import * as L from 'leaflet';行按原样复制到生成的 JS 文件中。

当您使用 <script src="scripts/maps/property-map.js" type="module"></script> 加载生成的 JS 文件时，浏览器理解导入语法(多亏了模块类型)，但是有 the module specifier needs to be different来自您的 TypeScript 项目:

Note: In some module systems, you can omit the file extension and the leading /, ./, or ../ (e.g. 'modules/square'). This doesn't work in native JavaScript modules.

因此你的错误信息。

您可以尝试这两种可能的解决方案:

1. 去掉导入
2. 使用ES模块绝对导入路径作为URL

1。去掉导入

假设您的 scripts/maps/leaflet.js文件是 UMD form 中的实际 Leaflet 库脚本(以便它提供全局 L 对象)(源版本或缩小版本)，那么您实际上不需要显式导入它:

• 在您的 TypeScript 项目中，您可以删除导入行； TS还是会知道什么L是，因为 it eagerly loads definitions from your node_modules/@types folder :

By default all visible ”@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible.

• 在浏览器中加载生成的 JS 文件而不导入，它知道什么 L是的，因为它之前被 Leaflet 库分配为 UMD

2。使用ES模块绝对导入路径作为URL

如果您更喜欢使用明确的 import ，那么你仍然可以使用绝对路径加载 Leaflet，但是为了与浏览器原生 JS 模块兼容，绝对路径实际上是 URL 的:

import * as L from "https://cdn.jsdelivr.net/npm/leaflet@1.8.0/dist/leaflet-src.esm.js";

同样，TS 编译器将原封不动地复制该路径，浏览器现在会很高兴(您甚至可以删除 <script src="scripts/maps/leaflet.js" type="module"></script> 文件中的 index.html 标记；后者将自动 按照 JS 模块的预期从指定的 URL 加载 Leaflet!)

但是，相反，您的 TS 项目将不再理解该路径，因此不再知道是什么 L是。

为了让它再次开心，我们可以使用 paths alias 告诉 TypeScript 在类型方面导入路径是什么在tsconfig.json :

A series of entries which re-map imports to lookup locations relative to the baseUrl.

{
  "compilerOptions": {
    // ...
    "baseUrl": ".", // Required for paths
    "paths": {
      "https://cdn.jsdelivr.net/npm/leaflet@1.8.0/dist/leaflet-src.esm.js": [
        "node_modules/@types/leaflet/index" // Re-map to the type
      ]
    }
  },
  // ...
}

有了这个，我们得到了“两全其美”:类型安全和原生浏览器 ES 模块(因此不需要像 webpack 这样的打包器)