在主要硫化包之外导入脚本的聚合物问题

Question

在开发聚合物网络组件时，我最终运行通过硫化用于生产。不幸的是，当我想使用两个单独的包。

例如，我有一个 base.html 文件，其中包含所有主要导入将在整个站点的每个页面上使用。我将其硫化为 base.build.html.

然后对于不同的页面，我可能只针对该页面进行自定义导入，例如。 contact-page.html

这两个都在 <head>

中加载

示例代码段：

<head>
    <!-- snip -->

    <!-- This is the vulcanized file -->
    <link rel="import" href="/static/elements/site-base.build.html">

    <!-- This extra import causes the extra errors -->
    <link rel="import" href="/static/elements/timeline-base.html">
    <!--
        File above is not currently vulcanized, but the import still breaks
        even if it is

        merging that import into site-base solves the problem.

        Also, if the site-base import _is not_ vulcanized, then both imports
        work fine
    -->

    <!-- snip -->
</head>

这里的想法是 base.build.html 被缓存并可用于所有后续页面。其他包仅根据需要加载和缓存。

问题是，如果我只加载我的基础包，所有的网络组件都可以工作美好的;但是，如果我然后执行 any 额外的导入，那么大多数 webcomponents 页面中断，控制台中出现大量错误消息。

当前的解决方法 是只在我的基础中包含所有额外的导入捆绑，但这当然最终会加载更大的 bunlde 文件脚本和 css 我不需要在每个页面上都需要。

这是 Vulcanize 的把戏吗？或者可能与 脚本的导入顺序？

注意：有问题的站点不是单页应用程序。这些都是传统的服务器端呈现的网站模板，所以构建过程非常与许多 polymercli 工具不同。

Answer 1

没有看到您收到的错误消息，我认为您遇到的问题是，您的额外导入包括已经捆绑在硫化基础包中的元素（很可能 polymer.html）。当 Polymer 尝试初始化同一个元素两次时会抛出错误。

这意味着您通常不能将硫化与 non-vulcanized 包装混合。

让多个硫化包一起工作也可能非常棘手，您将不得不使用硫化的 -exclude and/or -strip-exclude 选项来确保没有元素第一个包中包含的（及其依赖项）将包含在第二个包中。

在主要硫化包之外导入脚本的聚合物问题

Polymer issue importing scripts outside of primary Vulcanized bundle

web-component

polymer

vulcanize