requirejs優化器 - 需要幫助優化我們的應用程序

Question

我們有一個大規模的JavaScript應用程序，我們試圖使用grunt-contrib-requirejs進行連接和縮小。我們使用Aura框架。我們使用bower將其他存儲庫中的依賴關係引入我們的主應用程序。

這裏是我們應用結構

- app/ 
    | 
    |_ main.js 
    |_ index.html 
    |_ css 
    |_ bower_components/ 
     |_ core/ 
     |_ widget1/ 
      |_ main.js 
      |_ views/ 
      |_ models/ 
     |_ widget2/ 
     |_ extension1/ 
     |_ extension2/ 
     |_ other third party libraries, etc 
- Gruntfile.js 
- bower.json 

main.js：

requirejs.config({ 
    shim: { 
     ... 
    }, 
    paths: { 
     'core': 'bower_components/core/app/main', 
     'aura': 'bower_components/aura/dist/', 
     'jquery': 'bower_components/jquery/jquery', 
     'backbone': ..., 
     ... lots of other paths 
    } 
}); 
define(['core', 'jquery', 'jqueryui'], function(core, $) { 
    // Here we start Aura, which finds our extensions and widgets in 
    // bower_components 
}); 

我們目前requirejs任務配置：

requirejs: { 
    compile: { 
     options: { 
      mainConfigFile: 'app/main.js', 
      name: 'main', 
      include: ['bower_components/widget1/main', 'bower_components/widget2/main', 
       'bower_components/extension1/main', 'bower_components/extension2/main'], 
      exclude: ['jquery'], 
      insertRequire: ['main'], 
      out: 'dist/app.js' 
     } 
    } 
} 

這個連接我們的app/main及其依賴關係，但是當我們嘗試運行它時，我們得到的錯誤如下：
GET​​404（Not Found） 儘管下劃線是我們包含的許多小部件的依賴關係。

我們已經在the r.js examples中廣泛嘗試了不同的選項，並通讀了許多試圖找到答案的疊層流問題。
我們希望有關如何使用這種結構建設成爲一個縮小的文件，這樣的建議：

更新＃2：正確的文件結構

- dist/ 
    |_ index.html // copied using grunt copy 
    |_ css  // copied using grunt copy 
    |_ app.js  // Built with grunt requirejs 

UPDATE
我們已經在我們的墊片包括underscore其中修正了上述錯誤，但我們仍然收到另一個錯誤：

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://my-machine.com:8080/bower_components/core/app/main.js 

這包括在最小化的文件，所以我不明白爲什麼它無法找到該文件：

define("bower_components/core/app/main.js", ["aura/aura", "bootstrap"], function(){ 
... 
}); 

更新＃3
的定義從上面通過優化工具生成的文件來！最初定義該模塊，core/app/main.js，看起來像：

define(['aura', 'bootstrap'], function(Aura) { 
    ... 
}); 

Answer 1

幾個注意事項的第一：

首先，你應該避免定義一個名字模塊。名稱通常由優化工具生成。請在這裏閱讀：http://requirejs.org/docs/api.html#modulename

其次，您應該瞭解baseUrl是什麼以及它何時用於定位資源。雖然你沒有明確地定義baseUrl，但你的情況似乎是「app /」。您還應該閱讀以下內容： http://requirejs.org/docs/api.html#config-baseUrl 因此，如果使用「.js」擴展名，那麼baseUrl將不會被考慮。

現在你應該嘗試什麼：

要下手，請從第一個參數「bower_components /核心/應用/ main.js」定義的功能。然後你應該通過自動生成的模塊id來引用這個模塊，這個模塊id是一個相對於沒有「.js」擴展名的baseUrl的路徑。

Answer 2

你提到在優化文件中有這樣的：

define("bower_components/core/app/main.js", ["aura/aura", "bootstrap"], function(){ 
... 
}); 

但是，這沒有任何意義。如果我重現類似的向你展示你的問題是什麼，並在其上運行的優化則位於bower_components/core/app/main.js文件的結構優化爲：

define("core", ... 

，因爲它被稱爲core到應用程序的其餘部分由於paths設置'core': 'bower_components/core/app/main'。

如果我在構建配置中將'bower_components/core/app/main.js'添加到include設置中，我可以重現不正確的模塊名稱。當我將此名稱添加到include列表中時，我也會看到您提到的加載錯誤。確保您的include列表不包含此名稱，並確保沒有任何地方將'bower_components/core/app/main.js'列爲依賴項。此名稱不應出現在任何define或require調用中。