在 Firefox 和 Safari 上对 javascript 依赖项使用 HTML 导入时遇到困难

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

在 Firefox 和 Safari 上对 javascript 依赖项使用 HTML 导入时遇到困难

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

javascript

polymer