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

时间:2019-08-29 18:57:53

标签: node.js deployment lit-element lit-html npm-liveserver

我开始尝试使用lit-html和lit-elements,并对其进行处理,现在我陷入了一个无法找到如何在线发布此类代码的问题。从未在在线平台上使用Node-js程序包,仅使用过其中的部分代码。通常,我会构建简单的php / html模板,但是我想尝试一下。

构建一些有效的测试用例。但是到处搜索Google,以了解如何将这种代码在线发布到Internet。我正在使用共享托管,其中包含SSH之类的许多选项。但是无法找到使它正常工作的方法,就不可能像在服务器上运行npm install一样简单吗?

1 个答案:

答案 0 :(得分:2)

关于Web组件,lit-html和朋友的新世界,最好的事情是我们实际上不需要npm,我们不需要编译或根本不需要任何构建步骤

这几天,我们可以使用es-modules直接从CDN加载内容,例如unpkg或jsdelivr

看看haunted's 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>

check it out running live on this codepen example

?追逐