使用requirejs＆r.js优化器时无法加载jQuery插件

Question

我对requirejs优化器有点麻烦。运行优化器后，我的构建/编译文件中出现了一些错误消息。在没有优化步骤的情况下运行我的Web应用程序时，我没有任何错误。

这是我client.js文件（包括配置）（CoffeeScript的）

requirejs.config 
    baseUrl: '/source/' 
    paths: 
    text:     'lib/text' 
    io:     'lib/socket.io' 
    underscore:   'lib/underscore' 
    backbone:    'lib/backbone' 
    jquery:    'lib/jquery' 
# almond:    'lib/almond' 
    bootstrap:   'lib/bootstrap' 
    bootstrapFileUpload: 'lib/bootstrap-fileupload' 
    jqueryUniform:  'lib/jquery.uniform' 
    jqueryBrowser:  'lib/jquery.browser' 
    datatables:   'lib/jquery.dataTables' 
    datatables_bootstrap: 'lib/DT_bootstrap' 
    shim: 
    io: 
     exports: 'io' 
    jquery: 
     exports: 'jQuery' 
    jqueryBrowser: 
     deps: ['jquery'] 
    jqueryUniform: 
     deps: ['jqueryBrowser', 'jquery'] 
    underscore: 
     exports: '_' 
    backbone: 
     deps: ['underscore', 'jquery'] 
     exports: 'Backbone' 
    datatables_bootstrap: 
     deps: ['jquery', 'datatables'] 
    datatables: 
     deps: ['jquery'] 


require ['routers/router', 'backbone'], (Router, Backbone) -> 
    MainRouter = new Router() 
    Backbone.history.start() 

这里是我的优化配置。在需要'requirejs'作为模块之后，我从nodejs运行优化器。

config = 
    baseUrl: __dirname + '/../client/source' 
    name: 'lib/almond' 
    include: './client' 
    optimize: 'none' 
    out:  __dirname + '/../client/' + hash + '.js' 
    paths: 
     text:     'lib/text' 
     io:     'lib/socket.io' 
     underscore:   'lib/underscore' 
     backbone:    'lib/backbone' 
     jquery:    'lib/jquery' 
     bootstrap:   'lib/bootstrap' 
     bootstrapFileUpload: 'lib/bootstrap-fileupload' 
     jqueryUniform:  'lib/jquery.uniform' 
     jqueryBrowser:  'lib/jquery.browser' 
     datatables:   'lib/jquery.dataTables' 
     datatables_bootstrap: 'lib/DT_bootstrap' 
    shim: 
     bootstrap: 
     exports: 'bootstrap' 
     bootstrapFileUpload: 
     exports: 'bootstrapUpload' 
     io: 
     exports: 'io' 
     jquery: 
     exports: 'jQuery' 
     jqueryBrowser: 
     deps: ['jquery'] 
     jqueryUniform: 
     deps: ['jqueryBrowser', 'jquery'] 
     underscore: 
     exports: '_' 
     backbone: 
     deps: ['underscore', 'jquery'] 
     exports: 'Backbone' 
     datatables: 
     deps: ['jquery'] 
     datatables_bootstrap: 
     deps: ['jquery', 'datatables'] 



    requirejs.optimize config, (buildResponse) -> 
    js = true 
    if js && css 
     require './server' 
    , (err) -> 
    console.log 'requirejs err' 
    console.log err 

我看到Chrome中的特定的错误是： “遗漏的类型错误：无法读取的未定义的属性‘默认’”

这关联到这个片段：

/* Set the defaults for DataTables initialisation */ 
$.extend(true, $.fn.dataTable.defaults, { 

任何想法可能会出错？谢谢！

Answer 1

我遇到了同样的问题。我认为这个错误发生的原因是因为DT_bootstrap.js不是AMD模块，而是取决于其中一个的副作用。在这种情况下jquery.dataTables.js。

当RequireJS优化器将您引用的所有模块组合到一个大的JS文件中时，原始的DT_bootstrap.js位于它的中间某处，其中一些位于jquery.dataTables.js之后。问题是DT_bootstrap.js是在您的组合js文件加载时立即进行评估。它希望$.fn.dataTable当它遇到的行中定义：

$.extend(true, $.fn.dataTable.defaults, { 

由于jquery.dataTables.js是AMD模块已经编译但没有评估呢。只有在后面的代码中需要将其作为依赖项时才会对其进行评估，然后才会定义$.fn.dataTable。

我工作围绕这通过在AMD模块定义包裹“DT_bootstrap.js”，像在这里完成：https://github.com/amdjs/backbone/blob/master/backbone.js#L8-L24

例如：

(function(root, factory) { 
    // Set up DT_bootstrap appropriately for the environment. 
    if (typeof define === 'function' && define.amd) { 
    // AMD 
    define(['jquery', 'datatables', 'bootstrap'], function($) { 
     factory($); 
    }); 
    } else { 
    // Browser globals 
    factory(root.jQuery); 
    } 
}(this, function($) { 
    // <--- original DT_bootstrap.js goes here 
})); 

它解决了这个问题对我来说。

Answer 2

彼得几乎是正确的。他错过的唯一的事情是定义必须匹配凯西的配置。所以在上面的答案，而不是：

define(['jquery', 'dataTable', 'bootstrap'], function($) ... 

这将需要：

define(['jquery', 'datatables', 'bootstrap'], function($) ... 

否则需要JS会查找文件dataTable.js，而不是它需要获取一个。

Answer 3

由于要求2.1.11 the wrapShim option处理这个问题，所以你可以保留原始的源文件。