1

我正在构建一个桌面应用程序来监控一些事情并生成关于它正在监控的数据。当用户想要与数据交互时，应用程序会启动一个非常简单的 Web 服务器。服务器提供静态页面，并有一个基本的 http API 来提供数据。我使用 html 作为通用 UI，用户使用浏览器查看数据并与之交互。

我想使用 Google 的 Lit 2 将我的 html/css/js 重写为基于组件的 Web 应用程序。我喜欢纯 Web 组件的想法，但我注意到 Lit 提供了一些很棒的附加功能。毫不奇怪，大多数 Lit 文档都面向具有构建步骤的更传统的 Web 环境。我想看看我是否可以让我的服务器尽可能简单并避免使用传统的后端工具（打字稿编译、缩小等）。我想在一系列简单的 js 文件中用 Lit 组件替换我当前的静态 html/css/js。

目前，我的服务器从“公共”目录为我的页面提供服务，并且具有最小的 http API：

- public/
 -- js/
 -- css/
 -- index.html

我应该如何在没有构建步骤的系统中使用 Lit？我需要与我自己的继承自 LitElement 的 javascript 类一起提供的最小 Lit 文件集是多少？

4

1 回答 1

2

Lit 团队自 2021 年 8 月 1 日起不提供预构建的捆绑包，您必须自己构建（以解决浏览器尚不支持的裸模块说明符，例如）import .. from 'lit-html'

如果您对依赖第三方 CDN 并且仅支持现代浏览器感到满意，那么 skypack非常有用，因为您可以import lit from 'https://cdn.skypack.dev/lit';在网页中简单地：

<simple-greeting name="World"></simple-greeting>

<script type="module">
import {html, css, LitElement} from 'https://cdn.skypack.dev/pin/lit@v2.0.0-rc.2-TSkkpP2AxiJKOJvPcy1M/mode=imports,min/optimized/lit.js';

export class SimpleGreeting extends LitElement {
  static get styles() {
    return css`p { color: blue }`;
  }

  static get properties() {
    return {
      name: {type: String}
    }
  }

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

customElements.define('simple-greeting', SimpleGreeting);
</script>

（如果你打开https://cdn.skypack.dev/lit然后在评论中指定的固定 URL，你可以看到只涉及 5 个 JS 模块，因此手动从 lit 的源中提取它们作为应用程序的一部分托管也不应该很难。）

于 2021-08-02T01:50:19.047 回答