Web 组件和依赖项隔离

Question

Web 组件真的隔离了每个组件内部的依赖关系吗？ 我在同一页面中导入了两个组件，但出现以下错误：

Uncaught TypeError: JSON.stringify is not a function

当单独在页面中时，每个组件都可以正常工作。关于如何解决这个问题的任何想法？

谢谢。

Answer 1

它不隔离依赖关系，也不在沙盒 JavaScript 中运行。但是，您可以使用 Web 组件 imports 来确保您的依赖项被下载并只运行一次：

1) 将导入添加到您的 Web 组件 html 的每个：

<link rel="import" href="dependencies.html" />

2) 那么dependencies.html 应该包含您只需要运行一次的所有脚本：

<script type="text/javascript" src="mootools-1.2-core-nc.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>
....

浏览器只会在一个页面上下载一次dependencies.html，并且只运行一次。在第一次之后，它将简单地忽略同一文件的其他导入。

更多信息在这里：

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

---

更新，如果您对每个 web 组件有不同的依赖项：

1) 将所有需要的导入添加到每个您的 Web 组件 html：

<link rel="import" href="import-mootools-1.2-core-nc.html" />
<link rel="import" href="import-mootools-1.2-more.html" />

2) 然后导入文件应该包含一个脚本，你只需要运行一次：

文件import-mootools-1.2-core-nc.html 只包含这一行：

<script type="text/javascript" src="mootools-1.2-core-nc.js"></script>

文件import-mootools-1.2-more.html 仅包含这一行：

<script type="text/javascript" src="mootools-1.2-more.js"></script>

注意：如果在那之后你仍然有问题，那不是因为你多次包含依赖项。查看控制台上的“网络”选项卡，您会看到它只下载了一次。您可能还有其他问题。

Answer 2

不，如果 Web 组件处理全局对象或全局上下文，它们通常不会隔离外部依赖项。

您的问题是您要（至少）两次导入一个库，而该库不允许这样做。

无论如何都与 Web 组件无关。

更新：polyfill webcomponents.js 也不应该被导入两次。