2

さて、AMD 形式でいくつかの異なるモジュールが書かれているプロジェクトに参加しました。これらの javascript ファイルを 1 つの javascript ファイルに大まかに関連付ける必要があります。このファイルは、異なるプロジェクト間で (おそらく CDN から) 別の AMD モジュールとして参照されます。

私が直面している問題は、これらのファイルに対して r.js を実行して 1 つのファイルにまとめたときです。結合したファイルを別のプロジェクトにプルすると、未定義として吐き出されます。

私が話していることのアイデアを与えるために

words.spelling.js

define(['jquery', 'some.other.class'], function($, foo){
...
}

words.grammar.js

define(['jquery', 'some.other.class'], function($, foo){
...
}

words.translation.js

define(['jquery', 'some.other.class'], function($, foo){
...
}

r.js を通り、words.min.js に移動します

次に、次のようにapp.jsにプルするとします。

require(['jquery', 'app/main/main', 'words.min'], function($, main, words) {
$(document).ready(function() {
    console.log(words);
}

単語は未定義として表示されます。

それらをすべて連結するだけでは、何の役にも立ちません。

私は持っている偽のクラスを作成しようとしました

define(['word.grammar', 'word.translation', 'word.spelling'], function( g, t, s){
    return {
      grammar: g,
      translation: t,
      spelling: s
    };
});

r.jsを介してそれを実行しますが、サイコロもありません。ここで何か不足していますか、それともこれらを非 AMD 形式で書き直して、それらを連結して 1 つの巨大なオブジェクトを返すことができるようにするつもりですか? words.min.js は、CDN でホストされ、多数のプロジェクトで共有されるため、キャッシュされる必要があることに注意してください。そのため、別のファイルとして必要です。

4

1 に答える 1

3

1 つの解決策は、パス構成を使用して、これらのモジュール名を実際のファイルにマップすることです。

したがって、開発では、このようなものを使用します

require.config({
  paths: {
    'words.spelling': 'libs/words.spelling',
    'words.grammar': 'libs/words.grammar',
    'words.translation': 'libs/words.translation'
  }
}

開発から r.js オプティマイザーに同じパス構成を渡し、結合されたファイル内に配置されるモジュール名に追加のパス情報ではなく、名前だけが含まれるようにする必要があります。たとえば、結合されたバンドル内のモジュール名を :'words.spelling'ではなく'some/other/path/words.spelling'

そして、結合されたバージョンを別のアプリケーションで使用するには、次のようにして、これらすべてのモジュール名を同じファイルにマップします。

require.config({
  paths: {
    'words.spelling': 'libs/words.min',
    'words.grammar': 'libs/words.min',
    'words.translation': 'libs/words.min'
  }
}

混乱の一部は、これが r.js オプティマイザーの主な用途ではないことです。モジュール開発者向けではなく、最終的な Web サイト開発者向けに設計されているようです。しかし、上で見たように、強制的にそのモードにすることは可能です。

于 2013-06-12T22:40:29.903 に答える