我正在构建一个 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
test-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 对它永远不可用。我确定这里有一些明显的东西我遗漏了，但我正在努力解决它。
最佳答案
在 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
关于javascript - 难以在 Firefox 和 Safari 上使用 HTML 导入 javascript 依赖项和 polymer ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29291578/