如何在实时Web服务器上部署/使用lit-html，lit-element

Question

I started trying out lit-html and lit-elements, playing around with it and now I git in the problem where I cannot find out how to publish such code online. 我开始尝试使用lit-html和lit-elements，并对其进行处理，现在我陷入了一个无法找到如何在线发布此类代码的问题。 Never worked with Node-js packages on online platforms, only used bits of code from it. 从未在在线平台上使用Node-js程序包，仅使用过其中的部分代码。 Normaly I build plain php/html templates, but I wanna try this. 通常，我会构建简单的php / html模板，但是我想尝试一下。

Build some test cases localy that work. 建立一些可以正常工作的测试用例。 But googled all over the place to find out how i can publish this kind of code online to the internet. 但是到处搜索Google，以了解如何将这种代码在线发布到Internet。 I am using a shared hosting with many options like SSH eg But can't find out what to do to get this working, it can't be as simple as running npm install on my server right? 我正在使用带有SSH之类的许多选项的共享主机，但无法找到使此工作正常进行的方法，它不能像在服务器上运行npm install那样简单吗？

Answer 1

the best thing about the new world of web components, and lit-html and friends, is that we don't actually need npm, we don't need compilation, or any build step at all 关于Web组件，lit-html和朋友的新世界，最好的事情是我们实际上不需要npm，我们不需要编译或根本不需要任何构建步骤

these days, we can use es-modules to load things straight from a CDN like unpkg or jsdelivr 这些天，我们可以使用es-modules直接从CDN加载内容，例如unpkg或jsdelivr

take a look at the demo on haunted's github readme — this is all you need! 看一下困扰的github自述文件上的演示-这就是您所需要的！

<!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>

check it out running live on this codepen example 在此Codepen示例上进行实时检查

👋 Chase 👋追逐

如何在实时Web服务器上部署/使用lit-html，lit-element

问题描述

1 个解决方案

解决方案1
0 2019-09-08 23:08:39

如何在实时Web服务器上部署/使用lit-html，lit-element

问题描述

1 个解决方案

解决方案1 0 2019-09-08 23:08:39

解决方案1
0 2019-09-08 23:08:39