Question

在尝试创建使用requirejs模块的聚合物元素时，我遇到了阻塞issue。我知道聚合物不适用于requirejs，但目前它是我唯一的选择。

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

请勿使用requirejs并使您的模块与HTML导入兼容。
如here

Polymer()

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

深入研究这个问题，我开始攻击未记录的聚合物内部构件，意图完全停止聚合物，直到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));
    });
};

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

Answer 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>

Answer 2

所以来自斯科特迈尔斯的this solution但我发现它有点过于简单和不灵活，因为它依赖于：

<script>标签按顺序执行，因此排除：
- async脚本标记
- xhr的脚本加载
polymer从<script>标记加载，因此：
- layout.html且关联的css无法加载
- 以后对polymer.html won't be deduped

如果您想要更好地控制引导逻辑，则需要在组件完全加载之前强制执行组件之间的一些同步（这是requirejs和polymer竞争要做的事情）。

前面的例子是一种更具声明性（阅读polymer）的做事方式，但缺乏细粒度的调整。我started working on a repository通过使用更为迫切的方法来展示如何完全自定义负载排序，其中requirejs优先编排其余的自举。

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

使用Polymer和requirejs

2 个答案: