Question

我正在使用RequireJS编写JS Widget。完成小部件后，我用r.js和Almond编译它。一切顺利 - 但我无法找到一种简单的方法让用户在不使用RequireJS的情况下使用小部件 - 因为小部件代码加载异步（RequireJS使用AMD）。

我现在正在做的是忙于等待小部件代码加载并在检测到它已加载后才使用它。这不是非常用户友好。

有没有办法让你做这样的事情？

var widget = new Widget();

而不是忙着等待：

count = 0;

function loadWidget() {
    if (typeof Widget != 'undefined') {
        var p1 = new Widget();
        p1.render();
    } else {
        if (count > 10) {
            console.log('Failed to load the Widget');
            return false;
        }
        setTimeout(loadWidget, 50);
        count++;
    }
}

$(document).ready(function() {
    loadWidget();
});

谢谢！

修改

我的build.js

({
    name: './lib/almond.js',
    out: './deploy/sdk.min.js',
    baseUrl: '.',
    optimize: 'uglify2',
    mainConfigFile: 'sdk.js',
    include: ['sdk'],
    wrap: true
})

网页上的代码（假设页面上没有其他脚本标记）：

<script src="mywidget.js" data-main="scripts/sdk" id="mywidget"></script>

不确定＆＃39; data-main＆＃39;在编译js时确实是必需的。

Answer 1

您需要按照Almond提供的说明操作。要总结那里的文档中的基本要点，您在构建中需要的内容配置以下配置：

wrap: {
    startFile: 'path/to/start.frag',
    endFile: 'path/to/end.frag'
}

start.frag应该是：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else {
        root.Widget = factory();
    }
}(this, function () {

和end.frag：

    return require('main');
}));

结束片段以同步形式调用require，在这种情况下真正同步（而不是RequrieJS本身可以使用的伪同步糖）。

我之前尝试过这个。它有效。

让用户在加载后使用已编译的RequireJS Widget

1 个答案: