Question

我多年来一直对此感到困惑，并且有许多不同的shim设置。他们中的大多数给出了大致相同的问题。在阅读了很多关于此文档的文档之后，我甚至无法写下我尝试过的所有排列。所以我希望有人会认识到这个问题，并知道这样做的正确方法。

问题是同时加载bootstrap，jqueryUi，jsViews和bridget 有时在优化时失败使用r.js。

我有这样的设置。

这在未优化时有效：

config.js

requirejs.config({
    baseUrl     : 'js',

    paths: {
        "jquery"            : "lib/jquery",
        "jqueryUi"          : "lib/jquery.ui",
        "domReady"          : "lib/domReady",
        "bootstrap"         : "lib/bootstrap",
        "bootbox"           : "lib/bootbox",
        "bridget"           : "lib/jquery-bridget",
        "jsViews"           : "lib/jsviews"
    },

    shim: {
        "bridget"   : {
            deps        : ['jquery']
        },
        "jqueryUi"  : {
            deps        : ['jquery']
        },
        "jsViews"   : {
            exports     : "$",
            deps        : ['jqueryUi']
        },
        "bootstrap" : {
            exports     : "$",
            deps        : ['jsViews']
        },
        "bootbox"   : {
            deps        : ['bootstrap']
        }
    }

});

require(['app', 'domReady!', 'jsViews', 'jqueryUi', 'bootbox'], function(app) {
    app.start();
});

app.js

define(function(require) {

    var bootbox = require('bootbox');
    var $ = require('bootstrap');
    require('bridget');
    var Masonry = require('masonry.pkgd.js');

    // ...
    // .bridget is SOMETIMES undefined
    $.bridget('masonry', Masonry);

    // ...
    // .views (jsViews) is SOMETIMES undefined
    $.views.templates.mainView.render(data);

    // ...
    // .draggable (jquery-ui) is SOMETIMES undefined
    $('#selector').draggable(options);
});

现在奇怪的是，优化之后也可以，有时。当打开开发人员控制台时点击 Ctrl + F5 ，表明这有时会起作用，它有时会以Uncaught TypeError: undefined is not a function。

的形式抛出上述代码中评论的其中一个错误

我还注意到，当页面成功加载时，全局命名空间中有三个jQuery个对象。当其中一个错误出现时，只有两个jQuery个对象。

我认为整个modules和shims游戏只有一个。

这似乎是完全随机的。让我感到困惑的是，优化和未优化构建之间的行为是不同的。

我认为以下内容与可能的解决方案无关，但这里还有其他部分：

启动应用的HTML：

<!DOCTYPE html>

<html>
    <head>
        <script data-main="js/config" src="js/lib/require.js"></script>

Grunt r.js config：

grunt.initConfig({
    requirejs: {
        build: {
            options: {
                baseUrl     : "js/",
                mainConfigFile  : "js/config.js",
                dir     : 'release/js/',
                modules     : [{
                    name: 'js/app'
                }],
                findNestedDependencies  : true,
                optimize    : "none", // faster for testing
                done    : function(done, output) {
                    var duplicates = require('rjs-build-analysis').duplicates(output);

                    if (duplicates.length > 0) {
                        grunt.log.subhead('Duplicates found in requirejs build:');
                        grunt.log.warn(duplicates);
                        done(new Error('r.js built duplicate modules, please check the excludes option.'));
                    }

                    done();
                }
            }
        }
    }

编辑：

通过谷歌的魔力，我重新发现了一个类似的问题，我在4个月前问过但没有任何有用的答案：RequireJS loading jquery-ui fails after optimization

不同之处在于，我目前的设置只有有时，而不是所有时间。

RequireJS随机加载需要jQuery的依赖项

这在未优化时有效：

0 个答案: