Bower Installed Polymer 已损坏,但网络托管库可以正常工作

Bower Installed Polymer is broken but web hosted libraries work

我按照The Bower 安装方法按照Polymer Project 网站上的推荐安装了Polymer 库。具体来说,我 运行 这些命令来自我项目的 live web 文件夹的根目录。 OS 是亚马逊 Linux:

bower init
bower install --save Polymer/polymer#^1.2.0
bower update

这生成了以下 files/folders:

/bower.json
/bower_components/*
/bower_components/polymer/*
/bower_components/webcomponentsjs/*

为了测试这些库是否安装成功,我继续从教程中抓取一个示例并进行了尝试。只有这段代码的第一行有问题,但我将所有代码都包括在内以消除对此处代码有问题的担忧:

elements/proto-element.html

// THIS is the line that doesn't work. The file exists, it was 
// installed in the correct location. However, the polymer.html file 
// itself appears to be broken
<link rel="import" href="../bower_components/polymer/polymer.html">

// HOWEVER, if I change it to link the library in from the web, everything 
// works perfectly. As in this example:
<!--<link rel="import" href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">-->

<polymer-element name="proto-element">
  <template>
  <span>Hello World.</span>
  </template>
  <script>
    Polymer({
      ready: function() {
      }
    });
  </script>
</polymer-element>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>

我检查了有问题的 polymer.html 文件。 bower 安装的文件与网上提供的文件完全不同。我想我的问题是 - Polymer 的凉亭安装刚刚坏了吗?为什么 Bower 要安装活动稳定版本以外的版本?我错过了什么吗?

如果你打开网页版的代码,它清楚地标记为版本 0.5.5,即使它是从 /1.0/ 池中拉取的。

bower 版本在代码中没有版本标记,所以我不确定它是哪一个,但我必须假设它是最新的 1.2.x 稳定版本,因为它在安装命令。我会注意到,我确实在没有指定任何版本的情况下进行了尝试(应该只安装最新的版本),但仍然没有用。

结论

Bower 安装的库毕竟是工作文件。问题是我从 Polymer-Project.org 网站上的 "Getting Started" 教程中提取的示例已经过时了。非常小心 select v。 1.0 从右上角算起。

它不会起作用,因为您使用的是声明元素的旧方法(v0.8 之前)。

声明新元素的方式如下:

<dom-module id="my-element"> <!-- ID must be the same as that of the name of the element you declared. -->
  <template> <!-- Styles used to be declared outside the template v0.8 to v1.0. At v1.1 it is now declared inside the template (the outside declaration still works, it's just slow and discouraged).  -->
    <style> 
      :host {
        display: block;
      }
    </style>
    <div>Hello {{name}}.</div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element', // you must declare the name of your element
    properties: { // declare your element's properties here
        name: {
            type: String,
            value: 'Neil'
        }
    }
  });
</script>

此外,图书馆的官方 hub/CDN 位于 http://polygit.org,而不是官方网站。