- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
目前正在开发一个 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 © <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 文件很好地编译似乎过于麻烦。
最佳答案
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.
因此你的错误信息。
您可以尝试这两种可能的解决方案:
假设您的 scripts/maps/leaflet.js
文件是 UMD form 中的实际 Leaflet 库脚本(以便它提供全局 L
对象)(源版本或缩小版本),那么您实际上不需要显式导入它:
L
是,因为 it eagerly loads definitions from your node_modules/@types
folder :By default all visible ”
@types
” packages are included in your compilation. Packages innode_modules/@types
of any enclosing folder are considered visible.
L
是的,因为它之前被 Leaflet 库分配为 UMD如果您更喜欢使用明确的 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 这样的打包器)
关于javascript - Typescript 自动生成的 JS 文件 : "Uncaught TypeError: Failed to resolve module specifier",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72150694/
我有 4 个文件。 C:\perlCode2\start.pl6 C:\perlCode2\file0.pm6 C:\perlCode2\folder1\file1.pm6 C:\perlCode2\
我有一个结构如下的模块: /module __init__.py /submod_1 __init__.py submod_1_class.py
我的源代码在 java 7 上编译并在 java 11 上运行。 我正在尝试将 imperva RASP 作为 java 代理集成到 tomcat 中。但是,当我启动 tomcat 服务器时,它抛出以
justExport.js const first = () => { console.log('frist from justExport') } const second = () => {
以下模块用JS文件编写: module.exports = { propA: 1, propB: 2 } 允许稍后从模块导入属性,如:从“路径/到/模块”导入 { propA} 然而,将文件格
我一直在尝试在嵌套的惰性加载模块中实现ngx翻译,但一直未能如愿。我面临的唯一问题是,每当我通过选择器更改语言时,嵌套延迟加载模块中的语言都不会更改。 HttpLoader 工作正常,其他一切工作正常
我没有可重复的示例,因为问题更多是关于模块如何工作。我试图了解如何将一些 react 功能从一个模块传递到下一个模块。过去我收到过有关使用 ObserveEvent 的回复,但是当我在一个模块中使用响
我正在阅读Wikipedia's definition of Dependency inversion principle ,它使用了两个术语高级模块和低级模块,我无法弄清楚。 它们是什么以及依赖倒置
问题 我遇到的一个问题是将两个模块的类型和值带入一个新的组合模块中。我举个例子。目前我有以下两种类型签名 module type Ordered = sig type t (* the type
我是 JavaScript 的新手,最近一直在努力处理导入问题。有一件事我无法理解。 在较旧的节点模块(主要是那些在 ES6 之前出现的模块)中,可以使用 npm 安装,例如 express,通常没有
我正在尝试使用 System.JS 将 material-ui 导入我的 React 应用 在我的应用中,我这样做: import {AppBar, Tabs, Tab, Card, CardTitl
我想使用功能module->exports查找模块提供的所有导出。不幸的是,传递给该函数的模块必须在当前命名空间中声明,然后才能在其上使用该函数。当我静态地知道模块是什么时,这没问题,我只需要将其引入
目录结构如下 outdir |--lib |--- __init__.py |--- abc.py |--indir
这与提到的非常相似 here但是评论或回答中提供的每个解决方案都没有解决我的问题。想看看是否还有其他我应该看的东西。我尝试了不同的路径,比如 ./app/mycomponent/mycomponent
我有两个 Angular 模块:main 和 feature: 主/根模块: @NgModule({ imports: [ StoreModule.forRoot({route
我尝试在 Ubuntu 04.12 LTS x64 中安装“Userful MultiSeat-X64-5.0.1 ...”,在安装结束时遇到以下错误: File "", line 6, in Im
我正在尝试优化我的 vendor bundle.js,因为它已经膨胀并且我正在使用 material-ui 库。 import Card from 'material-ui'; // Very bad
错误: Import-Module : The specified module 'msonline' was not loaded because no valid module file was
我在 Server 2008 SP2(64 位)上执行导入模块 ActiveDirectory 时遇到问题。 NET Framework 3.5 SP1 已安装 我下载了 Windows6.0-KB9
嗯,你好! 我正在编写一个脚本来获取 Sql 作业历史记录,并且需要使用“SqlServer”模块。它已安装,但由于上面的错误消息,我无法导入它。当我到达模块路径时,文件夹“SqlServer”存在并
我是一名优秀的程序员,十分优秀!