在Polymer中使用第三方依赖性（pikadate）

Question

我正在使用pikaday创建一个聚合物日期选择器。可悲的是我好像出了点问题。

我想导入pikaday.js并pikaday.css 以正确的方式。

一开始，我在结束标记下方有一个简单的脚本标记dom-module，例如

</dom-module>
<script src="../../pikaday/pikaday.js"></script>
<script>
  Polymer({
    //....

这样，按预期方式创建了日期选择器。但是在阅读了此SO-Thread之后，我的印象是我应该像这样导入js文件：

 <link rel="import" href="../../paper-input/paper-input-behavior.html">
 <link rel="import" href="../../paper-input/paper-input-error.html">
 <link rel="import" href="../../pikaday/pikaday.js">
 //more imports....

但是在“修复”我的导入之后，该文件pikaday.js似乎在我的组件内部不可见：

Uncaught ReferenceError: Pikaday is not defined

此外，我对使用外部CSS感到困惑。阅读本指南后，似乎应该将提供的css文件的内容复制并粘贴到a中，my-datepicker-style.html然后将其导入到我的模板中，如下所示：

<dom-module id="my-datepicker">
  <template>
    <style include="my-datepicker-style"></style>
    <style>
      :host {
        //more css

我对复制和粘贴现有代码的需求感到困惑。

Answer 1

在更常见的是ES6导入之前，您需要某种解决方法来引用依赖项。

<script>标签的问题在于，当它多次出现时，将被多次处理。并非如此<link rel="import">。同一个href只会被处理一次。

但是，您不能直接导入javascript。诀窍是pikaday-import.html使用脚本引用创建文件

<script src="../../pikaday/pikaday.js"></script>

然后，将其导入到元素的html中

<link rel="import" href="pikaday-import.html" />
<dom-module id="my-datepicker"></dom-module>

这就是该技术的<marked-element> 用途。

这样，<my-datepicker>负载实例仅需一天一次。不幸的是，如果还有其他引用它的组件，最终可能会多次加载依赖项。