javascript - 使用 bower 安装时的 webcomponents.js

Question

是否有一种简单的方法来组合 webcomponents.js polyfill 的所有文件？我正在使用 polymer ，似乎有 2 个主要地方显着增加了请求的数量。 webcomponents.js 似乎通过 javascript 单独加载大约 70 多个文件。 Polymer-gestures 是对请求数量做出主要贡献的第二名，但比 webcomponents.js 少得多。有没有人对此有解决方案而不是去手动组合所有文件？

他们为什么不这样做呢？似乎有点可笑。即使将每个主要的 polyfill 类别分解为 4 个文件，也会好得多。

更新:我什至无法获得 example定在 polymer 工地工作时，使用硫化减少要求。我可以让图像在自定义组件中正常显示(工作)。它在进行 vulcanize 之后可以工作，但几乎不会减少任何请求，因为大多数请求都是通过 webcomponents.js 和 polymer.js 中的 JS 编写的脚本标签生成的。做 --inline 完全破坏它并且组件不加载。有什么想法吗？？？

更新:在尝试示例时，我使用的是我已经为当前项目提取的资源。我在一个独立的文件夹中尝试并再次提取资源(bower)并且它确实有效。我现在需要弄清楚的是，当我拉动它时会破坏一切，为什么？下面是我的非工作案例和工作案例的 bower.json 文件:

损坏:

{
  "name": "app",
  "private": true,
  "dependencies": {
    "webcomponentsjs": "webcomponentsjs#master",
    "polymer": "Polymer/polymer#master",
    "core-drawer-panel": "Polymer/core-drawer-panel#master",
    "paper-tabs": "Polymer/paper-tabs#master",
    "core-icon-buttons": "Polymer/core-icon-button#master",
    "core-toolbar": "Polymer/core-toolbar#master",
    "core-animated-pages": "Polymer/core-animated-pages#master",
    "core-header-panel": "Polymer/core-header-panel#master"
  }
}

工作:

{
  "name": "test",
  "private": true,
  "dependencies": {
    "polymer": "polymer/polymer#~0.5.5",
    "webcomponentsjs": "~0.5.5"
  }
}

我的问题是我仍然需要让它为我的项目提取这些其他资源，因为它们是我使用的组件。

Answer 1

您可以基于组件的使用来硫化您的代码。详细说明在 Polymer 网站上:

https://www.polymer-project.org/articles/concatenating-web-components.html