Question

我正在构建一个Polymer应用程序，并且难以导入javascript依赖项。我已经审核了this question，但解决方案对我不起作用 - 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之后触发（参见here）
注2：我也尝试过webcomponentsjs 0.5.5

测试component.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永远不可用。我确信这里有一些显而易见的东西，但我很难解决它。

Answer 1

在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

Answer 2

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

使用HTML导入来解决与Firefox上的聚合物的javascript依赖关系的难度苹果浏览器

2 个答案: