Comment remplacer un fichier modèle/vue lors de l'exécution, pour un fichier js combiné par l'optimiseur de requirejs?

Question

Scénario: Les frameworks utilisés sont backbone et nécessitent. J'ai un main.js qui a plusieurs dépendances sur util, model et view js, qui sont de nouveau interdépendants. Il y a aussi des dépendances cycliques. Cette main.js a été compilé dans un fichier unique en utilisant requirejs optimizer.

Problème: Comment remplacer certaines vues et certains modèles lors de l'exécution? (J'ai une seule version compilée de main, donc je ne parle pas d'exclure les js pour les modèles ou les vues au moment de la compilation). Au moment de la compilation, je ne sais pas si le modèle/la vue serait surchargé. Donc, quand je lance l'optimiseur, un seul fichier js avec tous les modèles et les vues est créé. Je dois redéfinir une définition de classe particulière dans ce seul fichier js, de sorte que je ne modifie pas ce fichier.

Y a-t-il une configuration qui dira à 'require' de charger le modèle/la vue à partir d'un fichier séparé plutôt que de ce seul fichier js compilé?

ou y a-t-il un moyen d'y parvenir, avec un minimum de changements?

//models/ - folder 

//mymodel.js - filename 
define([ 
    'jquery', 
    'underscore', 
    'backbone' 
], function($, _, Backbone) { 
    var mymodel2 = Backbone.Collection.extend({ 
     //some code 
    }); 
    return mymodel2; 
}); 

//mymodel2.js - filename 
define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'mymodel' 
], function($, _, Backbone, mymodel) { 
    var mymodel2 = Backbone.Collection.extend({ 
     //some code 
    }); 
    return mymodel2; 
}); 

//views/ - folder 


//view1.js - filename 
define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'runtime/util/logmanager', 
    'runtime/util/logger' 
], function($, _, Backbone, LogManager, Logger) { 
    var view1 = Backbone.View.extend({ 

     _configure: function(options) { 
      //some code 
     }, 

     initialize: function() { 
      //some code 
     }, 

     endsWith: function(str, suffix) { 
      //some code 
     } 

    }); 
    return view1; 
}); 

//like this i have view2.js, view3.js... etc 

//Similarly i have util folder with util1.js, util2.js... etc 

//main.js 
;(function(){ 

    if (!window.console) window.console = {}; 
    if (!window.console.log) window.console.log = function() { }; 
    var paths = { 
     jquery: 'libs/jquery/jquery', 
     underscore: 'libs/underscore/underscore', 
     initializer: 'runtime/initializer/initializer', 
     backbone: 'libs/backbone/backbone', 
     json2: 'libs/json/json2', 
     text: 'libs/require/text', 
     jqueryform: 'libs/jqueryform/jqueryform', 
     jqueryui: 'libs/jqueryui/jquery-ui', 
     slimscroll: 'libs/slimscroll/slimScroll', 
     i18next: 'libs/i18next/i18next', 
    common: 'libs/commons/common', 

    utility1 : 'util/util1', 
    utility2 : 'util/util2', 
    . 
    . 
    model2 : 'model/mymodel2', 
    . 
    . 
    . 
    view2 : 'view/view1' 
}; 

window.configData = window.configData || {}; 
window.configData.serverPath = location.protocol + "//" + window.location.host; 

require.config({ 
    paths: paths, 
    shim: { 
      'underscore': { 
       exports: '_' 
      }, 
      'backbone': { 
       deps: ['underscore', 'jquery'], 
       exports: 'Backbone' 
      }, 
      'i18next': { 
       deps: ['jquery', 'json2'], 
       exports: 'i18n' 
      } 
     } 
}); 

require(['router'], 
    function(Router) { 
     Router.initialize(); 
    }); 
})(); 

compilé/fichier combiné ressemblera à quelque chose comme:

*! jQuery v1.7.1 jquery.com | jquery.org/license */ 
(//jquery-def file code)(window); 

//  Underscore.js 1.3.3 
//  (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. 
//  Underscore is freely distributable under the MIT license. 
//  Portions of Underscore are inspired or borrowed from Prototype, 
//  Oliver Steele's Functional, and John Resig's Micro-Templating. 
//  For all details and documentation: 
//  http://documentcloud.github.com/underscore 

(function() { 

    //uderscore code 
}).call(this); 

define("underscore", (function (global) { 
    return function() { 
     var ret, fn; 
     return ret || global._; 
    }; 
}(this))); 
. 
. 
. 
all lib definition 
. 
. 
then depending on the dependencies models, views, utils, routers, definition 
. 
. 
and finally main 
;(function(){ 

    if (!window.console) window.console = {}; 
    if (!window.console.log) window.console.log = function() { }; 
    var paths = { 
     jquery: 'libs/jquery/jquery-min', 
     underscore: 'libs/underscore/underscore', 
     initializer: 'runtime/initializer/initializer', 
     backbone: 'libs/backbone/backbone', 
     json2: 'libs/json/json2', 
     text: 'libs/require/text', 
     bootstrap: 'libs/bootstrap/bootstrap', 
     jqueryform: 'libs/jqueryform/jqueryform', 
     jqueryui: 'libs/jqueryui/jquery-ui', 
     slimscroll: 'libs/slimscroll/slimScroll', 
     i18next: 'libs/i18next/i18next', 
     common: 'libs/commons/common', 

     utility1 : 'util/util1', 
     utility2 : 'util/util2', 
     . 
     . 
     model2 : 'model/mymodel2', 
     . 
     . 
     . 
     view2 : 'view/view1' 
    }; 

    window.configData = window.configData || {}; 
    window.configData.serverPath = location.protocol + "//" + window.location.host; 

    require.config({ 
     paths: paths, 
     shim: { 
       'underscore': { 
        exports: '_' 
       }, 
       'backbone': { 
        deps: ['underscore', 'jquery'], 
        exports: 'Backbone' 
       }, 
       'i18next': { 
        deps: ['jquery', 'json2'], 
        exports: 'i18n' 
       } 
      } 
    }); 

    require(['router'], 
     function(Router) { 
      Router.initialize(); 
     }); 
})(); 


define("main", function(){}); 

Answer 1

Comment passer outre certaines vues et modèles lors de l'exécution?

En Javascript, vous pouvez réaffecter des variables à tout moment. Exemple:

var x = 1; // the value of x is 1 
x = 2; // the value of x is now 2 

De même, vous pouvez remplacer les modèles de Backbone et vues lors de l'exécution comme ceci:

var myModel = new Backbone.Model({x: 1});// create myModel 
myModel = new Backbone.Model({x: 2});// now, myModel is a different model 
myModel = "something else entirely";// now, myModel is a string 

Answer 2

Y at-il configuration qui indiquera « besoin » pour charger le modèle /vue de un fichier distinct plutôt que ce seul fichier js compilé?

Pour charger un fichier JavaScript en utilisant besoin, vous pouvez l'appeler à tout moment (même après l'optimiseur a été exécuté), comme suit:

myModule = require('myJavascriptFile'); 

Le fichier optimisé n'a pas été conçu pour être manipulé. Modifiez votre source, puis ré-optimisez.

Notez également: Require ne compile pas votre Javascript.

Answer 3

Vous pouvez surcharger require() lui-même et lui faire d'abord rechercher le module dans un répertoire avant de le charger comme il le fait normalement.

Ce ne sera probablement pas facile à faire.