Web dependency locator
Using the quarkus-web-dependency-locator extension
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-web-dependency-locator</artifactId>
</dependency>implementation("io.quarkus:quarkus-web-dependency-locator")WebJars
如果你正在使用 WebJars，比如以下 JQuery：
If you are using WebJars, like the following JQuery one:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.1</version>
</dependency>implementation("org.webjars:jquery:3.1.1")你可以从你的 HTML 中引用 jar 中的文件，例如 /webjars/jquery/3.1.1/jquery.min.js。
you can reference the files in the jar from your HTML, example /webjars/jquery/3.1.1/jquery.min.js.
上述的是默认可用的，但是，添加 quarkus-web-dependency-locator 扩展允许你引用文件而无需在路径中包含版本，例如 /webjars/jquery/jquery.min.js。
The above is available by default, however, adding the quarkus-web-dependency-locator extension allows you to reference the files without having to include the version in the path, example /webjars/jquery/jquery.min.js.
Mvnpm
如果你正在使用 mvnpm，比如以下 Lit：
If you are using mvnpm, like the following Lit one:
<dependency>
<groupId>org.mvnpm</groupId>
<artifactId>lit</artifactId>
<version>3.1.2</version>
</dependency>implementation("org.mvnpm:lit:3.1.2")你可以从你的 HTML 中引用 jar 中的文件，例如 /_static/lit/3.1.2/index.js。
you can reference the files in the jar from your HTML, example /_static/lit/3.1.2/index.js.
上述的是默认可用的，但是，添加 quarkus-web-dependency-locator 扩展允许你引用文件而无需在路径中包含版本，例如 /_static/lit/index.js。
The above is available by default, however, adding the quarkus-web-dependency-locator extension allows you to reference the files without having to include the version in the path, example /_static/lit/index.js.
ImportMaps
Mvnpm jar 也允许你使用一个 importmap，它将允许你仅仅使用模块导入，例如 import { LitElement, html, css} from 'lit';。
Mvnpm jars also allows you to use an importmap, that will
allow you to just use module imports, example import { LitElement, html, css} from 'lit';.
importmap 由 quarkus-web-dependency-locator 扩展生成，并在 /_importmap/generated_importmap.js 中可用。这意味着将以下内容添加到你的 index.html 中将允许你按名称导入 web 库：
The importmap is generated by the quarkus-web-dependency-locator extension, and available at /_importmap/generated_importmap.js.
This means adding the following to your index.html will allow you to import web libraries by name:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My app</title>
<script src="/_importmap/generated_importmap.js"></script> 1
<script type="module">
import '@lit'; 2
import 'app/demo-app.js'; 3
</script>
</head>
</html>| 1 | Use the generated importmap |
| 2 | Import web libraries |
| 3 | Import your own files, this can be done by adding quarkus.web-dependency-locator.import-mappings.app/ = /app/ to the config. Any key-value pair can be added. |
Automatic imports
你还可以自动执行上面的导入。要执行此操作，将你的 Web 资产从 src/main/resources/META-INF/resources 移动到 src/main/web，现在用 {#bundle /} 替换上面的脚本和导入：
You can also automate the imports above. To do this, move your web assests from src/main/resources/META-INF/resources to src/main/web
and now replace the above scripts and imports with {#bundle /}:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My app</title>
{#bundle /} 1
</head>
</html>| 1 | This will be replaced at build time with the importmap script, and also include any CSS and JavaScript discovered in the /app directory. |
这让你可以添加库、js 和 css，而不必更改你的 HTML。热重载也受支持。
This allows you to add libraries, js and css without having to change your HTML. Hot-reload is also supported.
