使用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處理這個問題，所以你可以保留原始的源文件。