如何正确加载聚合物组件

Question

我对加载聚合物元素有疑问。当我配置我的 bower.json 文件依赖时没有正确加载。

这是我的 bower.json 文件：

{
  "name": "Example",
  "description": "Example",
  "version": "1.0.0",
  "license": "https://vaadin.com/license/cvtl-1",
  "authors": [
    "Vaadin Ltd"
  ],
  "dependencies": {
    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
    "iron-form": "PolymerElements/iron-form#^2.0.0",
    "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
    "polymer": "Polymer/polymer#^2.0.0",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
    "iron-icon": "^2.0.0",
    "paper-toast": "^2.0.0",
    "vaadin": "vaadin/vaadin#10.0.0-alpha8",
    "vaadin-grid": "vaadin/vaadin-grid#4.1.0-beta1",
    "vaadin-charts": "vaadin/vaadin-charts#6.0.0-alpha10",
    "vaadin-valo-theme": "vaadin/vaadin-valo-theme#2.0.0-alpha5",
    "vaadin-tabs": "^1.0.0",
    "app-layout": "polymerelements/app-layout#2.1.0"
    // "wysiwyg-e" : "^2.1.3"
  },
  "devDependencies": {
    "web-component-tester": "Polymer/web-component-tester#^6.0.0"
  },
  "private": true,
  "resolutions": {
    "vaadin-grid": "4.1.0-beta1",
    "vaadin-charts": "6.0.0-alpha10",
    "vaadin-valo-theme": "2.0.0-alpha5"
  }
}

我需要正确加载 app-layout 和 wysiwyg-e。我做错了什么？有什么建议吗？

Answer 1

通过查看您从同一目录加载的其他依赖项，我会说该路径区分大小写，并且对于 app-layout 您只使用小写字母，而不是 PascalCase 格式，所以也许你应该试试：

"app-layout": "PolymerElements/app-layout#2.0.1",

（我猜你指的是 2.0.1，而不是 2.1.0，因为 2.0.5 似乎是最新版本）

对于 wysiwyg-e 你可以试试：

"wysiwyg-e": "miztroh/wysiwyg-e#^2.1.3"

Answer 2

版本与此类 bower.json 文件发生冲突的原因是各个 Vaadin 组件（vaadin-grid、vaadin-charts 等）实际上包含了两次：一次通过 vaadin/vaadin 元包和第二次显式。

通常，仅对 vaadin 元包有 bower 依赖就足够了：

"dependencies": {
  "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
  "iron-form": "PolymerElements/iron-form#^2.0.0",
  "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
  "polymer": "Polymer/polymer#^2.0.0",
  "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
  "iron-icon": "^2.0.0",
  "paper-toast": "^2.0.0",
  "vaadin": "vaadin/vaadin#10.0.0-alpha8",
  "wysiwyg-e": "^2.1.3"
},
"devDependencies": {
  "web-component-tester": "Polymer/web-component-tester#^6.0.0"
}

这将提取 vaadin-grid、vaadin-charts 和所有其他 Vaadin 组件的一组匹配版本。

另请注意，您似乎使用的是过时的 alpha8 版本。请考虑升级到最新的测试版：vaadin/vaadin#10.0.0-beta8.

如果你真的需要使用特定版本的 vaadin-grid，方法是 而不是 使用 vaadin完全依赖于元依赖，或者指定它的版本，其中包括所需的 vaadin-grid 版本（例如 vaadin-grid#4.1.0-alpha1 是 vaadin#10.0.0-alpha5 的一部分，但没有 vaadin 包含 vaadin-grid 的 4.1.0-beta1 版本的元包。

如何正确加载聚合物组件

How to load polymer components correctly

polymer

vaadin-elements

polymer-2.x