Impossibile caricare i plugin jQuery quando si utilizza requirejs & r.js optimizer

Question

Ho un po 'di problemi con il mio requirejs optimizer. Dopo aver eseguito l'ottimizzazione, ricevo alcuni messaggi di errore nel mio file compilato/compilato. Quando eseguo la mia applicazione Web senza il passaggio di ottimizzazione, non ho errori.

Questo è il mio file Client.js (contiene config) (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() 

E qui è il mio config per l'ottimizzatore. Eseguo l'ottimizzatore da nodejs dopo aver richiesto 'requirejs' come modulo.

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 

L'errore specifico che sto vedendo in cromo è: "TypeError Uncaught: Impossibile leggere proprietà 'default' di indefinito"

che è correlato a questo frammento di codice:

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

Qualsiasi idea cosa potrebbe andare storto? Grazie!

Answer 1

Ho riscontrato lo stesso problema. Penso che il motivo per cui questo errore si verifica è perché DT_bootstrap.js non è un modulo AMD mentre dipende dagli effetti collaterali di uno. In questo caso jquery.dataTables.js.

Quando RequireJS optimizer combina tutti i moduli di riferimento in un unico grande file JS, il grezzo DT_bootstrap.js si trova nel mezzo di esso, in alcuni punti dopo lo jquery.dataTables.js. Il problema è che DT_bootstrap.js viene valutato immediatamente quando viene caricato il file js combinato. Vuole $.fn.dataTable da definire quando incontra la linea:

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

Dal jquery.dataTables.js è un modulo AMD è stato compilato, ma non ancora valutato. Solo nel codice successivo in cui è richiesto come dipendenza verrà valutato, e solo allora definirà $.fn.dataTable.

ho lavorato intorno a questo avvolgendo 'DT_bootstrap.js' in una definizione di modulo di AMD, come viene fatto qui: https://github.com/amdjs/backbone/blob/master/backbone.js#L8-L24

Ad esempio:

(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 
})); 

E 'risolto il problema per me.

Answer 2

Peter è quasi corretto. L'unica cosa che gli mancava era che le definizioni dovevano corrispondere alla configurazione di Casey. Quindi, nella risposta, invece di sopra:

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

che avrebbe bisogno di essere:

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

altrimenti richiederebbero js cercherà il dataTable.js file e non quello di cui ha bisogno per recuperare.

Answer 3

Dato che il problema è richiesto dal 2.1.11 the wrapShim option, è possibile conservare il file di origine originale.