javascript – 在聚合物中使用第三方依赖项(pikadate)

我正在使用pikaday创建一个聚合物数据选择器.可悲的是,我似乎遇到了问题.

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

起初我在关闭dom-module-tag下面有一个简单的脚本标签,就像

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

这样,datepicker就按预期创建了.但是在阅读了这篇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很困惑.看完this guide之后,好像我应该复制&将提供的css文件的内容粘贴到my-datepicker-style.html中,并将其导入我的模板,如下所示：

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

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

解决方法:

在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>的技术. uses.

这种方式< my-datepicker>的实例加载pickaday只一次.不幸的是,如果有其他组件引用它,您最终可能会多次加载依赖项.

标签：javascript,polymer
来源： https://codeday.me/bug/20190828/1756799.html