Typescript auto generated JS file: "Uncaught TypeError: Failed to resolve module specifier"

Question

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

我添加了 leaflet 和@types/leaflet 作为允许打字稿支持的节点模块。

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

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

打字稿文件：

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'; 行被复制 as-is 到生成的 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.

因此出现您的错误消息。

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

去掉导入
使用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 编译器将原封不动地复制该路径，浏览器现在会很高兴（您甚至可以删除 index.html 文件中的 <script src="scripts/maps/leaflet.js" type="module"></script> 标记；后者将自动从指定的 URL 加载 Leaflet，正如 JS 模块所预期的那样！）

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

为了让它再次开心，我们可以使用 tsconfig.json:

中的 paths alias 告诉 TypeScript 导入路径在类型方面是什么

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 这样的打包器）

Typescript auto generated JS file: "Uncaught TypeError: Failed to resolve module specifier"