6

我开始尝试 lit-html 和 lit-elements,玩弄它,现在我遇到了无法找到如何在线发布此类代码的问题。从未在在线平台上使用过 Node-js 包,只使用了其中的一些代码。Normaly 我建立普通的 php/html 模板,但我想试试这个。

在本地构建一些有效的测试用例。但是到处搜索,以了解如何将这种代码在线发布到互联网上。我正在使用具有许多选项(例如 SSH)的共享主机,但不知道该怎么做才能使其正常工作,它不能像在我的服务器上运行 npm install 那样简单吗?

4

1 回答 1

4

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

现在,我们可以使用 es-modules 直接从 CDN 加载东西,比如 unpkg 或 jsdelivr

看看haunted 的 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>

看看在这个 codepen 示例上实时运行

追赶

于 2019-09-08T23:08:39.667 回答