如何正确加载聚合物组件

时间:2018-04-29 08:05:36

标签: polymer polymer-2.x vaadin-elements

我有一个加载聚合物元素的问题。当我配置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-layoutwysiwyg-e。我做错了什么 ?有什么建议吗?

2 个答案:

答案 0 :(得分:0)

通过查看您从同一目录加载的其他依赖项,我会说该路径区分大小写,而对于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"

答案 1 :(得分:0)

版本与bower.json文件冲突的原因是各个Vaadin组件(vaadin-gridvaadin-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-gridvaadin-charts和所有其他Vaadin组件。

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

如果您确实需要使用说vaadin-grid的特定版本,那么执行此操作的方法是根本不使用vaadin元依赖项,或指定包含所需版本的vaadin-grid的其版本(例如vaadin-grid#4.1.0-alpha1vaadin#10.0.0-alpha5的一部分,但没有vaadin元的版本包含4.1.0-beta1vaadin-grid)的包。