javascript - Polymer 3 - 有没有办法将 html 模板提取到单独的 html 文件中？

Question

我正在尝试将 HTML 模板从我的 Polymer 组件中提取到一个独立的 HTML 文件中。对于 Polymer 2，我找到了一些示例，但它们不适用于我的 Polymer 3 项目。我尝试了类似以下的操作，但失败了。

import * as template from './pm.template.html';
...
static get template() {
    return template;
}

所以作为一个简单的问题，可以将模板分离为 HTML 文件(而不是 JS 文件)& 如果是的话，如何？

我知道，去年 10 月('17)有一个类似的问题，但只有通过 webpack 的方法，但这在我看来并不是一个简单的解决方案。我希望有人知道更好的方法，或者从即将推出的功能中了解一些东西。

( polymer 谷歌组内的相同问题:google groups polymer)

Answer 1

非常遗憾，没有直接的方法。

虽然 Polymer 2 完全是关于“使用平台”，并且在没有构建/捆绑的情况下运行应用程序是完全可行的，但自 Polymer 3 以来，这不再受支持(尽管您可能会发现适用于您的情况的不受支持的设置)。因此，我建议使用您选择的任何 bundler 。

也就是说，您或许可以减轻将模板与组件分离的原因。存在多个 Visual Studio Code 插件，用于在标记的模板文字中格式化 HTML，或在另一个选项卡中打开内容进行编辑:

• https://github.com/mjbvz/vscode-lit-html (内联)
• https://github.com/plievone/vscode-template-literal-editor (单独的标签)

如果您想尝试捆绑，您有多种选择:

• 有 official PWA starter kit ，基于 polymer-cli(它也为 LitElement 做广告)。
• 这polymer-3-webpack-starter-kit是一个很好的选择，尤其是在将 Polymer 3 与遗留元素(而不是新的 Lit/Redux 组合)一起使用时，并且恰好配置为开箱即用地支持您的确切用例。