Web dependency locator

本篇文档介绍了如何从 web 依赖项 jar（比如 WebJars 和 mvnpm）中提供静态资源。

Table of Contents

Using the quarkus-web-dependency-locator extension
- WebJars
- Mvnpm
- Dev UI

Using the `quarkus-web-dependency-locator` extension

pom.xml

<dependency>
    <groupId>io.quarkus</groupId>
    <artifactId>quarkus-web-dependency-locator</artifactId>
</dependency>

build.gradle

implementation("io.quarkus:quarkus-web-dependency-locator")

WebJars

如果你正在使用 WebJars，比如以下 JQuery：

pom.xml

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.1.1</version>
</dependency>

build.gradle

implementation("org.webjars:jquery:3.1.1")

你可以从你的 HTML 中引用 jar 中的文件，例如 /webjars/jquery/3.1.1/jquery.min.js。

上述的是默认可用的，但是，添加 quarkus-web-dependency-locator 扩展允许你引用文件而无需在路径中包含版本，例如 /webjars/jquery/jquery.min.js。

Mvnpm

如果你正在使用 mvnpm，比如以下 Lit：

pom.xml

<dependency>
    <groupId>org.mvnpm</groupId>
    <artifactId>lit</artifactId>
    <version>3.1.2</version>
</dependency>

build.gradle

implementation("org.mvnpm:lit:3.1.2")

你可以从你的 HTML 中引用 jar 中的文件，例如 /_static/lit/3.1.2/index.js。

上述的是默认可用的，但是，添加 quarkus-web-dependency-locator 扩展允许你引用文件而无需在路径中包含版本，例如 /_static/lit/index.js。

ImportMaps

Mvnpm jar 也允许你使用一个 importmap，它将允许你仅仅使用模块导入，例如 import { LitElement, html, css} from 'lit';。

importmap 由 quarkus-web-dependency-locator 扩展生成，并在 /_importmap/generated_importmap.js 中可用。这意味着将以下内容添加到你的 index.html 中将允许你按名称导入 web 库：

<!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	导入你自己的文件，你可以通过将 `quarkus.web-dependency-locator.import-mappings.app/ = /app/` 添加到配置中来完成。可以添加任何键值对。

Automatic imports

你还可以自动执行上面的导入。要执行此操作，将你的 Web 资产从 src/main/resources/META-INF/resources 移动到 src/main/web，现在用 {#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>