如何将 lit-html 添加到现有项目中？答案

【问题标题】：How do I add lit-html to an existing project?如何将 lit-html 添加到现有项目中？
【发布时间】：2021-01-05 12:07:06
【问题描述】：

我知道我可以在index.html 中使用<script type="module"> 标记导入lit-html，但我无法从单独的JS 脚本（例如index.js）访问html 或render。目前可以吗？

【问题讨论】：

请解释一下can't access的意思？
@Justinas 检查这个小提琴，当我尝试在不同的脚本 jsfiddle.net/mike_seekwell/rzhofu81/265 中使用 html 时出现错误
使用 ES 模块与典型脚本的作用域不同。如果你想在多个地方使用html，你必须在每个地方都导入它。
感谢@abraham，但我如何导入现有的普通 JS 脚本（例如 index.js）？
lit-html 只有一个可用的 ES 模块构建。如果你想在非模块上下文中使用它，你必须使用 Rollup、Babel 或 Webpack 之类的东西来处理它。

标签： javascript lit-html

【解决方案1】：

很抱歉回答了一个老问题，但文档可能自 2018 年以来已更新。现在他们提供了有关如何执行此操作的说明。

Install lit-html with npm:

npm install lit-html

然后import into your JS file 像这样：

import {html, render} from './node_modules/lit-html/lit-html.js';

然后在需要的地方致电html 和render() (https://lit-html.polymer-project.org/guide/getting-started#rendering-a-template)。

【讨论】：

【解决方案2】：

在你的 index.html 中使用这个 CDN

<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.d.ts</script>
<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.d.ts.map</script>
<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.js.map</script>

希望这能解决你的问题

【讨论】：