14

私は、javascript モジュール化のための RequireJS のような javascript モジュール ツールの評価を始めています。これは、特に開発中に役立つと思われるためmylib-<version>.js、依存ファイルの 1 つを変更するたびにすべての js ファイルを再コンパイルする必要はありません。

私のアプリは、html ファイルと javascript ファイルの両方で配布されています。実稼働環境では、javascript ファイルのコンパイル済みバージョンを使用したいと考えています。

したがって、開発中、私のhtmlファイルは次のようになります

<html>
  <head>
    <script data-main="scripts/main" src="scripts/require.js"></script>
  </head>
</html>

しかし、本番環境では、もっと似ていると思います

<html>
  <head>
    <script src="mylib-1.0.js"></script>
  </head>
</html>

コンパイルされたファイルを配布する場合、requirejs を参照する必要があるとは思わないでしょう。

アプリを配布する前に html ファイルを手動で変更せずにこれを行う方法はありますか?

4

2 に答える 2

11

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>

私のアドバイス:ヨーマンを使って生活を楽にしてください(少なくともミニファイ/連結を処理するために)。

于 2013-01-14T20:31:01.303 に答える
1

まず、 rコンパイラを使用して依存関係ツリーを1つのファイルにコンパイルする必要があります。その後、アーモンドのようなストライプダウンされたAMDローダーを使用できます。少なくとも、インデックスhtmlのURLを変更する方法を見つける必要があります。

全体を自動化できるgruntjsを見てください。プロセスを支援するuseminのようなたくさんのタスクがあります。

于 2013-01-14T20:34:39.263 に答える