在Firefox上使用聚合物的javascript依赖关系的HTML导入困难;Safari

Difficulty using HTML import for javascript dependencies with polymer on Firefox & Safari

本文关键字：导入 HTML Safari 关系 javascript Firefox 聚合物 依赖      更新时间：2023-09-26

我正在构建一个Polymer应用程序，在导入javascript依赖项时遇到困难。我已经复习了这个问题，但解决方案对我不起作用——lodash javascript不能通过HTML导入加载。lodash的使用只是一个例子，我试图以这种方式导入的任何库都存在这个问题。

以下测试代码在chrome中运行良好，但在firefox或safari中则不然（除非我对其进行硫化，否则我不需要这样做）。

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Test Page</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.6.0/webcomponents.min.js"></script>
      <link rel="import" href="components/lodash/lodash.html">
      <link rel="import" href="components/test-component/test-component.html">
    </head>
    <body fullbleed unresolved>
      <script>
        window.addEventListener('WebComponentsReady', function(e) {
          console.log("Web Components Ready!");
          document.body.appendChild(document.createElement("test-component"));
          console.log("Index:" + _.now());
        });
      </script>
    </body>
    </html>

注1:WebComponentsReady在HTMLImportsLoaded之后启动（请参阅此处）
注2：我也尝试过webcomponentsjs 0.5.5

测试组件.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../lodash/lodash.html">
<polymer-element name="test-component">
  <template>
    <style>
      :host {
        display: block;
        font-size: 2em;
        color: cornflowerBlue;
      }
    </style>
    <div id='test_elem' on-tap="{{go}}" fit layout horizontal center center-justified>
      Click Me!
    </div>
  </template>
  <script>
    Polymer({
      ready: function() {
        console.log("test-component component ready!");
      },
      go : function(event, detail, sender) {
        console.log("Component:" + _.now());
      }
    });
  </script>
</polymer-element>

lodash.html

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

safari控制台的有序输出：

Web Components Ready!
test-component component ready!
ReferenceError: Can't find variable: _

降低复杂性仍然会带来同样的问题：

index.html（更简单的版本）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test Page</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.6.0/webcomponents.min.js"></script>
  <link rel="import" href="components/test-component/test-component.html">
</head>
<body fullbleed unresolved>
  <test-component></test-component>
</body>
</html>

页面加载后，我可以随时点击该组件，但错误仍然会发生-lodash.js永远不可用。我确信这里明显缺少一些东西，但我正在努力解决它。

在lodash.html中，从中删除type="application/javascript"

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

更新

我在这里提交了一个webcomponents.js错误：https://github.com/webcomponents/webcomponentsjs/issues/273

您可以使用一个现成的lodash组件，如下所示：https://github.com/Waxolunist/lodash-element

相关文章：