Grunt build non esponendo le informazioni globali ho bisogno

Question

Quando eseguo il mio progetto localmente con il mio grunt: task del server, il progetto funziona come mi aspetto. Tuttavia, dopo la costruzione, che prende tutto il codice del fornitore e lo inserisce in un unico file, due dei miei moduli necessari non sono disponibili e il progetto non funziona.

Ecco la mia configurazione requirejs:

requirejs.config 
    baseUrl: './js' 
    shim: 
    'underscore': 
     exports: '_' 
    'backbone': 
     deps: ['underscore', 'jquery'] 
     exports: 'Backbone' 
    'stack': 
     deps: ['d3.global'] 
     exports: 'stack' 
    'highlight': 
     exports: 'hljs' 

    paths: 
    'underscore': '../components/underscore/underscore' 
    'backbone': '../components/backbone/backbone' 
    'jquery': '../components/jquery/jquery' 
    'd3': '../components/d3/d3' 
    'd3.global': '../components/d3.global/d3.global' 
    'stack': '../components/stack/stack' 
    'highlight': '../components/highlightjs/highlight.pack' 

require ['app/vendors'],-> 
    console.log("Backbone", Backbone) 
    console.log("_", _) 
    console.log("$", $) 
    console.log("d3", d3) 
    console.log("stack", stack) 
    console.log("hljs", hljs) 

app/fornitori assomiglia

define [ 
    'underscore' 
    'jquery' 
    'backbone' 
    'text' 
    'd3.global' 
    'stack' 
    'highlight' 
], -> 

Quando eseguo il progetto a livello locale tramite grugnito, vedo tutte le variabili globali stampati. Tuttavia, quando costruisco il progetto, Backbone Underscore e JQuery vengono stampati, mentre lo stack fallisce (anche hljs non è disponibile, e se rimuovo lo stack da app/venditori, non risolve l'evidenziazione, quindi probabilmente non è una cosa da ordine) .

il requirejs ottimizzatore viene chiamato con la seguente configurazione:

requirejs: 
    compile: 
    options: 
     baseUrl: 'js/' 
     appDir: './<%= yeoman.tmp_dist %>/' 
     dir: './<%= yeoman.dist %>/' 

     wrap: true 

     removeCombined: true 
     keepBuildDir: true 

     inlineText: true 
     mainConfigFile: '<%= yeoman.tmp_dist %>/js/main.js' 

     # no minification, is done by the min task 
     optimize: "none" 

     modules: [ 
     { name: 'app/vendors', exclude: [] } 
     { name: 'app/app', exclude: ['app/vendors'] } 
     { name: 'main', exclude: ['app/app', 'app/vendors'] } 

Ci potrebbe essere qualcosa di sbagliato con la pila ed evidenziare i file che ho bisogno di risolvere il problema al fine di rendere requirejs ottimizzazione e uglify lavoro con loro?

Ho installato highlightjs tramite bower aggiungendo "highlightjs": "~8.0" al mio file bower.json ed eseguendo bower install. Ho scaricato stack.js da mbostock's stack project. Sto usando v0 al momento, con piccole modifiche per farlo funzionare in questo progetto. La fonte di tutti questi è nel components directory of my github project.

BOUNTY Se qualcuno è disposto a clonare il repo se stessi, e provare a eseguire il progetto con grunt server e grunt build per aiutarmi a rintracciare il problema, sarei molto grato. Al momento ho gli script del fornitore nel repository github stesso, quindi tutto ciò di cui avresti bisogno è bussola e bower per eseguirlo.

Answer 1

Ciò è dovuto a wrap: true nella configurazione r.js. Ecco una semplice configurazione che isola il problema:

main.js

define([ 'legacy' ], function(legacy) { 
    var greeting = 'hi'; 
    console.log(greeting, legacy.foo); 
}); 

legacy.js

var globalThing = { foo: 1, bar: 2 }; 

build.json

{ 
    "name": "main", 
    "optimize": "none", 
    "out": "main-built.js", 
    "shim": { "legacy": { "exports": "globalThing" } }, 
    "wrap": true 
} 

r.js La fuga di Let (r.js -o build.json) e prendere in considerazione il risultato (formattato da me):

(function() { // this immediately-invoked function expression (IIFE) 
       // is here because r.js has "wrap: true" in the config 

    var globalThing = { foo: 1, bar: 2 }; 

    // code generated from the "shim" entry in the config 
    define('legacy', function(global) { 
     return function() { 
      var ret, fn; 
      // since global.globalThing is undefined, 
      // that's where it goes wrong 
      return ret || global.globalThing; 
     }; 
    }(this)); 

    define('main', [ 'legacy' ], function(legacy) { 
     var greeting = 'hi'; 
     console.log(greeting, legacy.foo); 
    }); 

})(); // end of the IIFE 

Come si può vedere dal codice di cui sopra, globalThing non è globale più. Lo stesso accade con le librerie stack e highlight nel tuo progetto che usano var e le dichiarazioni di funzione per definire i loro globali.

Per risolvere questo problema, abbiamo un paio di opzioni. Il primo è considerare se hai veramente bisogno di wrap: true nella configurazione. Se lo si elimina, i globals torneranno globali e tutto dovrebbe iniziare a funzionare come previsto.La seconda opzione è provare ad aggiungere wrapShim: true alla configurazione. Puoi leggere le sfumature di utilizzo di questa opzione here. Se cerchiamo con la nostra configurazione di esempio, avremo qualcosa di simile:

(function() { 

    (function(root) { 
     define('legacy', [], function() { 
      return function() { 
       var globalThing = { foo: 1, bar: 2 }; 
       return root.globalThing = globalThing; 
      }.apply(root, arguments); 
     }); 
    })(this); 

    define('main', [ 'legacy' ], function(legacy) { 
     var greeting = 'hi'; 
     console.log(greeting, legacy.foo); 
    }); 

})(); 

Sembra buono con me.