尝试通过 gradle 中的 Webjar 依赖项将 Lit JS 框架添加到现有的 Spring 引导项目中。 结果：无法解析模块说明符
[英]Trying to add the Lit JS framework to an existing Spring Boot project via Webjar dependency in gradle. Results in:Failed to resolve module specifier
问题描述
When I try to use the framework I am seeing this error in the browser:
当我尝试使用该框架时，我在浏览器中看到此错误：
Failed to resolve module specifier "@lit/reactive-element"
In my html thymeleaf template I have:在我的 html thymeleaf 模板中，我有：
<script type="module" th:src="@{/js/simple-greeting.js}"></script>
and in the simple-greeting.js I am referencing the lit framework like:在 simple-greeting.js 中，我引用了 lit 框架，例如：
import {html, css, LitElement} from '/webjars/lit/index.js';
the "simple-greeting.js" is included with my static js. “simple-greeting.js”包含在我的 static js 中。 And the Lit dependency is included as a webjar. Lit 依赖项作为 webjar 包含在内。
I feel like I'm missing something fundamental (hopefully simple) with how the JS frameworks import/export modules.我觉得我在 JS 框架如何导入/导出模块方面缺少一些基本的东西（希望是简单的）。 Is there some sort of build process I need to do to leverage the JS framework?我需要做某种构建过程来利用 JS 框架吗？ (I really hope not) （我真的希望不会）
1 个解决方案
解决方案1
0 2022-08-25 12:23:05
To solve that problem, you'll need a new tool called import maps.为了解决这个问题，您需要一个名为导入地图的新工具。
The following html page should be able to load以下 html 页面应该可以加载
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="importmap">
{
"imports": {
"lit": "/webjars/lit/index.js",
"@lit/reactive-element": "/webjars/lit__reactive-element/reactive-element.js",
"lit-html": "/webjars/lit-html/lit-html.js",
"lit-element/lit-element.js": "/webjars/lit-element/lit-element.js"
}
}
</script>
<script type="module">
import {LitElement, html, css} from 'lit';
console.log(LitElement);
</script>
</head>
<body>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.