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) {
...
});