r.js optimiseur - construction d'un js tout compris avec quelques modules, et quelques cales

Question

Lorsque tous les scripts sont chargés individuellement, tout fonctionne comme un charme. J'essaie maintenant d'optimiser.

Cependant, parce que certains des fichiers .js chargés sont des shims, cela ne fonctionne tout simplement pas, pas d'erreurs JavaScript dans la console, il semble que rien ne soit en train de s'exécuter.

fichier testRjs.js

({ 
    baseUrl: "./dist/", 
    paths: { 
     "requireLib": "./require", 
     "app": "./app", 
     "main": "./main", 
     "jquery": "./jquery-2.1.4", 
     "jqbsace": "./jqbsace", 
     "datatables": "./jquery.dataTables", 
     "moment": "./moment", 
     "momentTZ": "./moment-timezone", 
     "momentDF": "./moment-duration-format", 
     "datarangepicker": "./daterangepicker/daterangepicker", 
     "highstock": "./highstock", 
     "bootstrap": "./bootstrap", 
     "aceconcat": "./aceconcat", 
     "jstz": "./jstz-1.0.4.min", 
     "shared": "./controllers/shared1", 
     // Controller modules 
     "casnodes/chronicnodes": "./controllers/casnodes/chronicnodes" 
    }, 
    shim: { 
     "datarangepicker": ["jquery"], 
     "highstock": ["jquery"], 
     "jstz": { 
      exports: "jstz" 
     }, 
     "bootstrap": ["jquery"], 
     "aceconcat": ["bootstrap"], 
     "momentTZ": ["moment"], 
     "momentDF": ["moment"] 
    }, 
    name: "casnodes/chronicnodes", 
    out: "chronicnodesTest.js", 
    wrapShim: true, 
    include: ["requireLib"] 
}) 

module chronicnodes:

define(["jquery", "datatables", "highstock", "moment", "datarangepicker", "aceconcat"], function($) { 

    $('#allChronicView').DataTable({ 
     ajax: { 
      url: ajaxUrl 
     }, 
     dom: 'Bfrtip', 
     buttons: [{ 
       extend: 'excel', 
       text: 'Export (Excel)' 
      }, 

      { 
       extend: 'csv', 
       text: 'Export (CSV)' 
      }, 

      { 
       extend: 'pdf', 
       text: 'Export (PDF)' 
      } 
     ], 
     'columns': [{ 
      'type': 'num', 
      'data': 'NodeId', 
      render: function(data, type, row) { 
       return '<a id="http://shield?id=' + data + '" onclick="return false;"> ' + data + ' </a>' 
      } 
     }, { 
      'data': 'Name' 
     }, { 
      'data': 'Alias' 
     }, { 
      'type': 'string' 
     }, { 
      'type': 'string' 
     }, { 
      'type': 'date', 
      'data': 'DateQuery' 
     }, { 
      'type': 'num', 
      'data': 'Condition' 
     }, { 
      'type': 'num', 
      'data': 'TimeSecLastCondition' 
     }, { 
      'type': 'num', 
      'data': 'Occur' 
     }, ], 
     "columnDefs": [{ 
      "targets": 0, 
      "visible": false 
     }, { 
      // The `data` parameter refers to the data for the cell (defined by the 
      // `data` option, which defaults to the column being worked with, in 
      // this case `data: 0`. 
      "render": function(data, type, row) { 
       var mDate = moment(data); 
       return mDate.tz(jstz.determine().name()).format('M/D/YYYY HH:mm:ss z'); 
      }, 
      "targets": 5 
     }, { 
      "render": function(data, type, row) { 
       var str = row["Name"].substring(3, 5); 
       return str; 
      }, 
      "targets": 3 
     }, { 
      "render": function(data, type, row) { 
       var str = row["Name"].substring(5, 9); 
       return str; 
      }, 
      "targets": 4 
     }] 
    }); 
}); 

bâtiment comme celui-ci:

noeud

r.js -o testRjs.js

Y compris en HTML comme ceci:

<script> 
     var ajaxUrl = '@Url.Content(url)'; 
</script> 
<script src="~/Scripts/chronicnodesTest.js"></script> 

Sur une note côté, le fichier chronicnodes.js ne dispose pas de tout rien niché dans un .ready $ (document)(), cela pourrait être un problème?

L'aide est appréciée.

Answer 1

Vous devriez revoir votre utilisation de shim.

Par exemple moment-timezone appelle define, comme vous pouvez le voir here:

if (typeof define === 'function' && define.amd) { 
    define(['moment'], factory);     // AMD 
} 

il n'a donc pas besoin d'un shim. L'utilisation d'un shim avec du code appelant define entraîne un comportement indéfini. Parfois, cela n'a aucun effet, mais parfois cela pose des problèmes. Il n'est donc pas particulièrement surprenant qu'ici, le shim inutile pour moment-timezone ne pose pas de problème avant l'optimisation, mais provoque des problèmes après.

Une autre chose à vérifier est de savoir s'il existe un module utilisant un shim qui doit avoir une option exports. Certains des modules que vous utilisez clairement n'ont pas besoin et exports. Par exemple, Bootstrap installe lui-même un plugin jQuery plutôt que de déclarer des symboles dans l'espace global. Cependant, d'autres modules que vous utilisez peuvent avoir besoin de exports. (Je ne suis pas familier avec tous les modules que vous utilisez donc je ne sais pas avec certitude.) Sans wrapShim: true vous pourriez obtenir un exports manquant mais avec cette option activée, un exports manquant fera échouer votre code. Ce n'est pas un problème pour le code non optimisé.