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

dev*_*ats 6 deployment node.js npm-live-server lit-element lit-html

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

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

Cha*_*kal 5

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

\n\n

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

\n\n

看看闹鬼的 github 自述文件\xe2\x80\x94 上的演示,这就是你所需要的!

\n\n
<!doctype html>\n<html lang="en">\n\n<my-counter></my-counter>\n\n<script type="module">\n  import { html } from \'https://unpkg.com/lit-html/lit-html.js\';\n  import { component, useState } from \'https://unpkg.com/haunted/haunted.js\';\n\n  function Counter() {\n    const [count, setCount] = useState(0);\n\n    return html`\n      <div id="count">${count}</div>\n      <button type="button" @click=${() => setCount(count + 1)}>Increment</button>\n    `;\n  }\n\n  customElements.define(\'my-counter\', component(Counter));\n</script>\n
Run Code Online (Sandbox Code Playgroud)\n\n

看看这个 codepen 示例上的实时运行情况

\n\n

追赶

\n