如何在实际的网页服务器上部署/使用lit-html和lit-element？

Question

如何在实际的网页服务器上部署/使用lit-html和lit-element？

node.jsdeploymentlit-elementlit-htmlnpm-live-server

7

我开始尝试使用lit-html和lit-elements，玩弄它并且现在遇到了一个问题，我不知道如何在线发布这样的代码。我从未在在线平台上使用过Node-js软件包，只使用其代码片段。通常我制作简单的php/html模板，但我想尝试这个技术。

我在本地构建了一些可以工作的测试案例。但搜索了整个互联网，也没找到如何将这种代码发布到网络上的方法。我正在使用具有多个选项（例如SSH）的共享托管，但找不到让它运行的方法，难道只需要在服务器上运行npm install就可以了吗？

- devFlats

只要您正确构建项目或设置导入映射，就可以使用静态Web服务器或CDN进行部署。 - Alan Dávalos

谢谢你的回答。我将webpack添加到我的gulp设置中，这样我就可以处理node模块了。现在一切都开始拼凑在一起了。 - devFlats

因为有些客户的原因，我不能使用Node作为后端。几个月前，我从polymer-cli切换到了open-wc，并编写了如何在Apache上部署的内容：https://open-wc.org/publishing/#serving-with-apache-http-server - Thad

你需要配置 polymer.json 并运行 polymer build。在本地存储库中...然后将该文件夹上传到共享主机中的文件资源管理器..阅读此博客以了解如何配置 polymer.json... https://jsabarinath.wordpress.com/2019/03/30/polymer-build-with-service-worker-in-polymer-3/ - shabarinath

我强烈推荐使用Rollup而不是Webpack。open-wc.org有一个很好的Rollup配置，可以与LitElement一起使用。 - Justin Fagnani

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ChaseMoskal · Accepted Answer

新的网络组件世界中最好的事情是，我们实际上不需要npm、不需要编译或任何构建步骤。

现在，我们可以使用ES模块直接从CDN（如unpkg或jsdelivr）加载内容。

请查看 haunted 的 github readme上的演示--这就是你所需的全部！

<!doctype html>
<html lang="en">

<my-counter></my-counter>

<script type="module">
  import { html } from 'https://unpkg.com/lit-html/lit-html.js';
  import { component, useState } from 'https://unpkg.com/haunted/haunted.js';

  function Counter() {
    const [count, setCount] = useState(0);

    return html`
      <div id="count">${count}</div>
      <button type="button" @click=${() => setCount(count + 1)}>Increment</button>
    `;
  }

  customElements.define('my-counter', component(Counter));
</script>

点击此处查看CodePen示例运行

Chase