使用 Polymer 和 requirejs答案

【问题标题】：Working with Polymer and requirejs使用 Polymer 和 requirejs
【发布时间】：2014-09-24 21:36:02
【问题描述】：

在尝试创建使用 requirejs 模块的聚合物元素时，我遇到了阻塞 issue。我知道聚合物不是为与requirejs一起工作而设计的，但目前它是我唯一的选择。

搜索答案我找到了两个解决方案：

不要使用 requirejs 并使您的模块与 HTML 导入兼容。
将Polymer() 调用放入requirejs 回调中，如here 所述

由于我必须使用 require，至少目前，我选择了解决方案 2。然而，事实证明该解决方案导致元素注册和incorrect data binding prior to Polymer upgrading the element的异步延迟。

为了深入研究这个问题，我开始破解未记录的 Polymer 内部结构，目的是完全停止 Polymer，直到 requirejs 完成它的工作。这是我想出的：

Polymer.require = function(tag, deps, func) {
    var stopper = {}
    Polymer.queue.wait(stopper);
    require(deps, function() {
        delete stopper.__queue;
        Polymer.queue.check();
        Polymer(tag, func.apply(this, arguments));
    });
};

我知道这是非常错误的。有没有更好的解决方案？

【问题讨论】：

标签： polymer

【解决方案1】：

我发现如果我在 Polymer 脚本中嵌入对 require 的调用，我可以避免这个问题。

<link rel="import" href="../polymer/polymer.html"/>
<script src="../requirejs/require.js"></script>
<script src="../something/something.js"></script>

<polymer-element name="some-component">
    <template>...</template>
    <script>
     (function() {
       Polymer('some-component', {
            someMethod: function () {

               require(['something'], function (Something) {
                    var something = new Something();
                    ...
               }
        }
     )();
    </script>
</polymer-element>

【讨论】：

这留下了你在哪里打电话给require.config的问题，看到这个类似的thread

【解决方案2】：

所以有来自 Scott Miles 的 this solution，但我发现它有点简单和不灵活，因为它依赖于：

<script> 标签按顺序执行，因此排除：
- async脚本标签
- xhr 基于脚本加载
polymer 从 <script> 标签加载，因此：
- layout.html 和关联的 css 不会被加载
- 任何未来呼叫polymer.htmlwon't be deduped

如果您想更好地控制引导逻辑，则需要在组件完全加载之前强制在组件之间进行一定程度的同步（requirejs 和 polymer 都在竞争这样做）。

前面的例子是一种更具声明性（阅读polymer）的做事方式，但没有达到细粒度的调整。我已经 started working on a repository 展示了如何完全自定义加载顺序，方法是使用更加命令式的方法，其中 requirejs 优先协调其余的引导。

在撰写本文时，这种额外的控制是以更差的性能为代价的，因为各种脚本无法并行加载，但我仍在努力优化它。

【讨论】：