聚合物3 - 有没有办法将html模板提取到一个单独的html文件中？

Posted 2021-04-12

我试图从我的Polymer组件中提取html模板到一个独立的HTML文件。对于Polymer 2，我发现了一些例子，但它们对我的Polymer 3项目不起作用。我尝试了类似下面的内容，但它失败了。

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

因此，作为简单的问题，可以将模板分离为HTML文件（不是JS文件），如果是，如何？

我知道，从去年10月（'17）开始也有类似的问题，但是只有一种方法可以通过webpack，但这并不是一个简单的解决方案。我希望有人知道更好的方式，或者从即将推出的功能中了解一些东西。

（聚合物谷歌集团内部的同样问题：google groups polymer）

答案

非常不幸的是，没有直接的方法。

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

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

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

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

• 有official PWA starter kit，基于聚合物cli（也广告LitElement）。
• 这个polymer-3-webpack-starter-kit是一个很好的选择，特别是当使用带有遗留元素的Polymer 3（而不是新的Lit / Redux组合）时，恰好配置为支持你的确切用例，开箱即用。