有聚合物元素的 CDN 吗？答案

【问题标题】：Is there CDN for polymer elements?有聚合物元素的 CDN 吗？
【发布时间】：2014-09-10 16:15:33
【问题描述】：

我想知道是否有任何聚合物元素的 CDN，因为您必须始终下载元素，并且通过 cdn 导入它会更方便。在谷歌上找不到任何东西？还有什么原因它不存在或仅仅因为它太新？

【问题讨论】：

标签： polymer web-component

【解决方案1】：

现在有！

我专门为此目的创建了这个 GitHub 存储库：

download/polymer-cdn

所有 GitHub 存储库都通过RawGit 自动在 CDN 中。因此，使用它，我们现在可以使用这样的标记导入 Polymer 元素（在本例中为 iron-icons）：

<link rel="import" 
      href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-icons/iron-icons.html">

项目结构的设置方式使得从您导入的元素（传递依赖项）的导入正确解析。

存储库的自述文件包含它包含的所有元素的列表。

遗漏了什么？ Let me know，我很乐意加入。

试试看

你现在可以通过破解这个 Codepen 来尝试一下：

Polymer-CDN Example.

或者你可以运行这段代码sn-p：

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<style is="custom-style">
  :root {
    --paper-tabs-selection-bar-color: var(--paper-light-blue-900);
    --paper-tab-ink: var(--paper-light-blue-100);
    --paper-tabs: {
      color: white;
      background-color: var(--paper-light-blue-500);
    };
  }
</style>

<div>
  <paper-button raised><iron-icon icon="check"></iron-icon>OK</paper-button>
  <paper-button raised><iron-icon icon="clear"></iron-icon>Cancel</paper-button>
</div>

<p><paper-checkbox>Checkbox</paper-checkbox></p>

<p><paper-toggle-button></paper-toggle-button></p>

<paper-tabs selected="0">
  <paper-tab>TAB 1</paper-tab>
  <paper-tab>TAB 2</paper-tab>
  <paper-tab>TAB 3</paper-tab>
</paper-tabs>

【讨论】：

很酷的倡议，但我需要你的 CDN 中没有的最近元素（子菜单）
@maxiplay 正在处理它。以后请使用 GitHub 问题跟踪器，因为我会更频繁地检查它。
@maxiplay 我已将其更新到 Polymer 的 1.1.3 版。让我知道这是否适合您。
是的，它工作得很好。谢谢你。我可以通过尝试构建递归纸质菜单plnkr.co/edit/KqR3X5PKfuTKq7oNgTvO?p=info 将我的 plunker 发布给聚合物团队以解决错误
@maxiplay 太棒了！感谢您的反馈。如果它对你有帮助，别忘了点赞:)

【解决方案2】：

您也可以直接从polymer-project.org 访问聚合物元素。

示例：

<link rel="import" href="https://www.polymer-project.org/0.5/components/core-ajax/core-ajax.html">

【讨论】：

不幸的是，如果没有 https，您将无法将其用作 Google Apps 脚本的来源！
这是用于0.5，已弃用。我认为1.0 存在类似的东西......但是在这两种情况下，您都链接到一些不明智的“主”版本恕我直言。您应该链接到不会突然改变的特定版本。

【解决方案3】：

这是一个老问题，但现在有一个非 hacky 的解决方案：http://polygit.org/

它在幕后使用 rawgit，但提供了更好的 api。

【讨论】：

Polygit 现已弃用

【解决方案4】：

我现在不知道任何托管聚合物元素的 CDN，我认为将它们 vulcanize 用于生产环境会更好，但由于大多数元素都托管在 github 上，您可以将导入链接到rawgit.com

示例：

<link rel="import" href="https://rawgit.com/Polymer/core-ajax/master/core-ajax.html">

【讨论】：

这不起作用 --- 大多数 HTML 文件通过相对 URL 引用其他组件中的文件，例如 ../polymer/polymer.html。因为 github 目录布局在组件名和文件名之间有额外的master，所以这些都不会解决。
请不要这样做，github不是cdn。
@PauloCheque rawgit.com 是 CDN，它正在发送正确的 Content-Type 标头
@Nemo64 你可能想看看RawGit.com，它绝对是一个CDN。
@DavidGiven 是的，你是对的，传递依赖不起作用。它们要求所有元素都在同一个文件夹中。我为此专门设置了一个 Git 存储库：download/polymer-cdn。另请参阅下面的答案。

【解决方案5】：

您可以看看 cloudflares 聚合物 CDN： http://cdnjs.com/libraries/polymer

【讨论】：

如果我需要纸和核心元素，如何使用 polymer.js？

【解决方案6】：

rawgit 选项

您必须手动管理一些依赖项，因为 core-ajax.html 在polymer.html 上返回 404。 rawgit.com 缓存也设置为仅 5 分钟 (cache-control:max-age=300)。 5 分钟缓存对于版本控制来说很好，但对于 CDN (https://rawgit.com/Polymer/core-ajax/0.4.1/core-xhr.html) 应该更多。文件也不会被缩小。

硫化选项

可能是 http/2 发布之前的最佳选择。您将不得不花一些时间来配置和集成到您的构建过程中。此外，您没有任何 CDN 优势（无数据成本，已缓存来自第三方域的资源。）

结论

在 http/2 版本中将会有一些带有缩小聚合物版本和长过期标头的 CDN。但我现在什么都不知道。

【讨论】：

请注意，如果您标记要使用的版本（无论如何都是一个好习惯），rawgit 允许您使用从缓存中永不过期的 URL。实际上，另一种方式（直接来自 master）仅允许用于测试目的。如果您在那里发送过多流量，它们会限制并最终阻止您。