脚本加载顺序错误 - require.js答案

【问题标题】：script loading order error - require.js脚本加载顺序错误 - require.js
【发布时间】：2013-06-20 09:46:24
【问题描述】：

在清除缓存后的应用程序初始加载时，我得到一个 jquery 未定义 bc 应用程序试图在加载 jquery 之前加载 jquery validate。刷新后，一切都加载并正常工作。我以为我设置正确，但我错过了什么吗？使用backbone.js、require.js和jquery。

Main.js：

require.config({
  paths: {
    'jquery': 'libs/jquery/jquery-min',
    'underscore': 'libs/underscore/underscore-min',
    'backbone': 'libs/backbone/backbone-min',
    'validate': 'jquery.validate-1.11.1.min',
    'templates': '../templates'
  },

shim: {
    jquery: {
    exports: "jquery"
  },
    underscore: {
    exports: '_'
  },
  backbone: {
    deps: ['underscore', 'jquery'],
    exports: "backbone"
  },
    validate: {
    deps: ['jquery'],
    exports: "validate"
  }
},

});

require([
  'app'

], function(App){
  App.initialize();
});

App.js

define([
  'jquery', 
  'underscore', 
  'backbone',
  'validate',
  'router',
  'scripts'
], function($, _, Backbone, validate, Router, scripts){
var initialize = function(){
  Router.initialize();
};

return { 
  initialize: initialize
};
});

这是我将文件更新到的内容，但仍然没有运气：

require.config({
  paths: {
'jquery': 'libs/jquery/jquery-min',
'underscore': 'libs/underscore/underscore-min',
'backbone': 'libs/backbone/backbone-min',
    'validate': 'jquery.validate-1.11.1.min',
'templates': '../templates'
  },

shim: {
    underscore: {
    exports: '_'
  },
  backbone: {
    deps: ['underscore', 'jquery'],
    exports: "Backbone"
  },
    validate: {
    deps: ['jquery', 'backbone'],
    exports: "validate"
  }
}

});

require([
  'app'
], function(App){
  App.initialize();
});

App.js

    define([
  'jquery', 
  'underscore', 
  'backbone',
     'validate',
    'router',
    'scripts'
], function($, _, Backbone, validate, Router, scripts){
  var initialize = function(){
Router.initialize();
  };

 return { 
    initialize: initialize
  };
});

【问题讨论】：

我检查了 firebug html，看起来脚本以正确的顺序加载 - 要求、主、应用程序、jquery、下划线、主干、验证，但我仍然收到 jquery is undefined 错误验证插件。

标签： jquery backbone.js requirejs

【解决方案1】：

从这里看到的 jquery validate 是一个被 $.validate() 调用的插件。

在这种情况下，您不需要进行任何导出。

你可以试试看是否对你有帮助：

   shim: {
        validate: {
            deps: ['jquery']
        }
    }

您还可以查看类似的stackoverflow问题以供参考：How to make a jQuery plugin loadable with requirejs

【讨论】：

【解决方案2】：

你从哪里得到错误？你可以粘贴堆栈跟踪吗？

同样值得检查的是 jquery 的 url。在浏览器中输入您的 jquery url（以 'libs/jquery/jquery-min' 结尾），看看是否可以找到。

【讨论】：

【解决方案3】：

exports 必须具有第三方脚本所期望的相同类型大小写。在这种情况下：jQuery 和 Backbone

require.config({
    paths: {
        'jquery': 'libs/jquery/jquery-min',
        'underscore': 'libs/underscore/underscore-min',
        'backbone': 'libs/backbone/backbone-min',
        'validate': 'jquery.validate-1.11.1.min',
        'templates': '../templates'
    },
    shim: {
        jquery: {
            exports: "jQuery"
        },
            underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: "Backbone"
        },
        validate: {
            deps: ['jquery'],
            exports: "validate"
        }
    },
});

【讨论】：

感谢回复，改了exports好像没有任何效果
你删除浏览器缓存了吗？
是的，甚至仔细检查了最新版本正在加载的萤火虫。我确定这是我忽略的简单事情。
你能在validate源的开头设置一个断点吗？也许你可以看看那里的全局变量并从中推断出其他东西

【解决方案4】：

exports 属性需要匹配全局属性名称 - 对于 jQuery，它需要是 $ 或 jQuery。对于主干，它需要是Backbone。

您也不需要填充 jQuery - 它通过命名定义与 AMD 兼容已经有一段时间了。见https://github.com/jquery/jquery/blob/master/src/exports.js#L15-L17

【讨论】：

谢谢，更新了属性名称并删除了 jquery shim，但仍然没有运气

【解决方案5】：

感谢您的回复，我相信您的反馈解决了我可能遇到的一些其他问题。看起来我使用的是非常旧的 require.js 0.27.0 版本并升级到最新版本修复了 jquery 问题。

【讨论】：