打字稿自动生成的JS文件："Uncaught TypeError: Failed to resolve module specifier"

Question

目前正在Blazor项目中工作，我想要高级映射功能，使用带有typescript绑定的Leaflet.js库。

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

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

Uncaught TypeError: Failed to resolve module specifier "leaflet". Relative references must start with either "/", "./", or "../".

在JS文件的顶部生成一行：

import * as L from 'leaflet';

如果我删除这一行，一切都可以，但我不能手动删除它，因为它是从我的TS文件中自动生成的，在需要它的地方。

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

tsconfig:

{
"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>

不确定是否需要，但这是我的包装.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文件时，浏览器会理解导入语法(由于模块类型)，但模块说明符需要与TypeScript项目不同：

注意：在某些模块系统中，可以省略文件扩展名和前导/、./或../(例如'modules/square')。这在本机JavaScript模块中不起作用。

因此出现错误消息。

您可以尝试以下两种可能的解决方案：

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

1.取消导入

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

• 在TypeScript项目中，您可以删除导入行；TS仍然知道什么是L，因为它急切地从您的node_modules/@types文件夹加载定义：

默认情况下，编译中包含所有可见"@types"包。任何封闭文件夹的node_modules/@types中的包都被视为可见。

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

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

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

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

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

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

为了让它再次高兴起来，我们可以使用tsconfig.json:中的paths别名，告诉TypeScript导入路径的类型是什么

将导入重新映射到相对于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)