RequireJsには最適化ツールがあり、モジュールを縮小して連結するのに役立ちます。オプションがたくさんあり、使いにくい場合もありますが、GruntJsや(特に) GruntJsを使用してビルドするYeomanなどのビルドツールを使用すると簡単になります。
どちらの場合もrjs
(モジュールを最適化する)タスクを使用できますが、 Yeomanにはジェネレーターがあり、既に構成されているため、少し簡単です。
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
ここではindex.html
、コメント行を使用して、どのjsファイルをどの出力ファイルに縮小/連結するかを指定します。
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
上記の例では、モジュールは。という名前の1つのファイルに連結されますamd-app.js
。
編集:
grunt
これは、コマンドラインから実行することで実行されます。これにより、多くの便利なタスクが開始され、プロジェクトがdist
フォルダーにビルドされますが、これも非常に適応性があります。
結果のindex.html
ファイル(in dist
)には、(必要に応じて)1つのjavascriptファイルしかありません。
<script src="scripts/15964141.amd-app.js"></script>
私のアドバイス:ヨーマンを使って生活を楽にしてください(少なくともミニファイ/連結を処理するために)。