0

在开发聚合物网络组件时，我最终通过 vulcanize 运行它们以用于生产。不幸的是，当我想使用两个单独的捆绑包时，这给我带来了问题。

例如，我有一个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是缓存并在所有后续页面上可用。其他包仅根据需要加载和缓存。

问题是，如果我只加载我的基本包，所有 web 组件都可以正常工作；但是，如果我随后进行任何额外的导入，则页面上的大多数 Web 组件都会中断，控制台中会出现大量错误消息。

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

这是 Vulcanize 的一个技巧吗？或者可能与 脚本的导入顺序有关？

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

4

1 回答 1

1

在没有看到您收到的错误消息的情况下，我假设您遇到的问题是，您的额外导入包含已经捆绑在您的硫化基础包中的元素（并且很可能是 polymer.html）。当 Polymer 尝试两次初始化同一个元素时会引发错误。

这意味着您通常不能将硫化包装与非硫化包装混合使用。

让多个硫化包一起工作也可能非常棘手，您必须使用 vulcanize 的-exclude和/或-strip-exclude选项来确保第一个包中包含的元素（及其依赖项）不会包含在第二包。

于 2017-02-16T20:56:27.577 回答