Grunt構建不公開我需要的全局變量

Question

當我使用grunt：server任務在本地運行項目時，該項目按我期望的那樣工作。但是，在構建了所有供應商代碼並將其放入一個文件之後，我需要的兩個模塊不可用，並且該項目不起作用。

這裏是我的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) 

應用程序/廠商看起來像

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

當我通過咕嚕本地運行的項目，我看到所有的全局打印出來。然而，當我構建項目時，Backbone Underscore和JQuery會打印出來，而堆棧失敗（hljs也不可用，如果我從應用程序/供應商中刪除堆棧，它不會修正高亮，因此它可能不是訂單） 。

的requirejs優化被稱爲具有以下配置：

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'] } 

難道還有一些錯誤的堆棧，並強調，我需要爲了使requirejs優化，並與他們醜化工作來解決文件？

我通過在bower.json文件中添加"highlightjs": "~8.0"並運行bower install來安裝highlightjs。我從mbostock的stack project下載了stack.js。目前我正在使用v0，只需稍作更改即可在此項目中使用。所有這些的來源在components directory of my github project。

BOUNTY如果有人願意克隆回購自己，並嘗試與grunt server和grunt build運行項目，以幫助我追查這個問題，我會非常感激。目前，我有github回購自己的供應商腳本，所以你應該需要的是指南針和涼亭來運行它。

Answer 1

這是由於r.js配置中的wrap: true。下面是隔離問題的簡單配置：

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（r.js -o build.json），並考慮結果（由我格式化）：

(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 

正如你可以從上面的代碼中看到，globalThing不是全局了。在項目中堆棧和高亮庫也是如此，因爲它們使用var和函數聲明來定義它們的全局變量。

要解決這個問題，我們有幾個選項。首先是考慮你是否真的需要配置中的wrap: true。如果放棄它，全局變量將再次變爲全局變量，並且所有事情都應該按照預期開始工作。第二種方法是嘗試將wrapShim: true添加到配置中。您可以閱讀關於使用此選項的細微差別here。如果我們用我們的示例配置嘗試一下，我們會得到如下結果：

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

})(); 

對我很好。