RequireJS を使用して多数の JavaScript ファイルを最適化しようとしていますが、オプティマイザを使用してスクリプトを適切に構築し、それらをブラウザに適切な方法でロードする方法に頭を悩ませています。
以下の説明は具体的なものですが、他にも多くの人が同じ課題に直面していると思います。(または、彼らは要件でより賢明な選択をしました!)
bowerを使用してスクリプトのカタログをダウンロードしています。これらのスクリプト (またはその一部) を Web ページに含めたいと考えています。
さらに、テスト中は、基本的にブラウザーに個々の bower スクリプトを取得させたくありません。ローカル テスト フレームワークは要求に連続して応答するため、これは非常に低速です。RequireJS オプティマイザーまたはその他の方法を使用して、ダウンロードしたすべての bower スクリプトを 1 つのファイルに結合したいと考えています。
対照的に、私自身のコードは Coffeescript ファイルの長いリストに分割されており、RequireJS CS プラグインを使用してそれらをブラウザー用にコンパイルしたいと考えています。
そのときの開発では、ブラウザが次のようなものをロードすることを期待していました。
components.js
main.js
csmain.coffee
my_module.coffee
これcomponents.js
は、bower のcomponents
ディレクトリにある次のファイルで構成されます。
- jquery: jquery/jquery
- jqueryui:
- jquery-ui/ui/jquery.ui.core
- jquery-ui/ui/jquery.ui.datepicker
- 増幅:
- 増幅/コア/増幅.コア
- 増幅/リクエスト/増幅.リクエスト
- ブートストラップ:
- ブートストラップ/js/ブートストラップ遷移
- ブートストラップ/js/ブートストラップ-アラート
- ブートストラップ/js/ブートストラップボタン
- ブートストラップ/js/ブートストラップ-カルーセル
- ブートストラップ/js/ブートストラップ-折りたたみ
- ロダッシュ:ロダッシュ/ロダッシュ
実稼働環境では、ブラウザーは 1 つのファイル (たとえばall.js
.
私の質問は次のとおりです。RequireJS を使用すると、ブラウザーmain.js
とビルド スクリプトに入り、部分的および完全に最適化されたビルドを実現できます。私はこの問題に不釣り合いなほど多くの時間を費やしましたが、RequireJS からの不可解で不可解なエラーの数は、悲劇的なほど長くなりました。仕事のツールではないようですが、修正していただければ幸いです。
私が持っている最適化スクリプトは次のようなものです (YAML 表記):
baseUrl: "../media/my-scripts/"
optimize: none
out: build/all.js
stubModules:
- cs
- coffee-script
paths:
cs: "../../scripts/components/require-cs/cs"
'coffee-script': "../../scripts/components/require-cs/coffee-script"
usf: "./main"
components: "../compiled/components"
name: usf
logLevel: 0
shim: # ...
私が解決したい問題はかなり単純なようですが、解決策はすぐには見つかりません。RequireJS は素晴らしいものですが、私が必要としているものよりも劇的に複雑です。Almond.jsはモジュールをロードするための代替手段ですが、問題は代替の適切なオプティマイザがないことにあります。
上記を達成するために使用できるオプションr.js
、または代わりにどのような適切な代替最適化ソリューションが存在するかについての考えに感謝します。