4

grunt-contrib-requirejs を使用して連結および縮小しようとしている大規模な JavaScript アプリケーションがあります。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 とその依存関係が連結されますが、実行しようとすると次のようなエラーが発生
ます。アンダースコアは、含まれる多くのウィジェットの依存関係です。

r.js の例でさまざまなオプションを広範囲に試し、答えを見つけようとして多くのスタックオーバー フローの問題を読みました。
これを次の構造の 1 つの縮小ファイルに組み込む方法についてアドバイスが必要です。

更新 #2 : 正しいファイル構造

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

更新
上記のエラーを修正する shim を 含め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) {
    ...
});
4

2 に答える 2