7

ダミープロジェクトでrequirejsを使い始めました。ここで、r.jsスクリプトを使用して、本番用のプロジェクトをビルドします。

コンテキストは次のとおりです。

  • start.jsというメインファイルは次のとおりです。

    require([/* some stuff */], function (){ /* app logic */ });

    ある条件に基づいて私が何を要求すべきかを決定するifがあります。

  • 必要なファイルはModuleAまたはModuleBのいずれかです

  • ModuleAとModuleBの両方に依存関係があります。

    define([/*some deps*/], function(dep1, dep2...) { 
    /* app logic */ 
    return { /* interface */
}

  • 最適化とモジュールの連結の前に、開発モードではすべてが正常に機能します。

  • r.jsを使用してビルドする場合、モジュールターゲットとして次のように指定します：modules：[{name： "start"}、{name： "ModuleA"}、{name： "ModuleB"}]

問題は、私のModuleAが次のようになることです。

 define(dep1 ..);
 define(dep2 ..);
 define(ModuleA ..);

しかし、ModuleAからは何もロードされません。開発中のModeulAからのコードはロードおよび実行され、ビルド後のコードはロードされますが実行されません。

どうすればこの問題を解決できますか？

アップデート

http://pastebin.com/p1xUcY0A- > start.js

http://pastebin.com/dXa6PtpX- > ModuleA js-animation.js

http://pastebin.com/xcCvhLrT->ModuleBcss-animation.js詳細なし。

http://pastebin.com/j51V5kMt- >オプティマイザーの実行時に使用されるr.js構成ファイル。

http://pastebin.com/UVkWjwe9->r.jsを実行した後のjs-animation.jsの外観。これは問題のあるファイルです。このファイルからjs-animationモジュールを取得していません。requireは私のjs-animationオブジェクトを返しません。

編集：

モジュール定義の最後でstartjsから.jsを削除した後、最適化されたstart.jsはhttp://pastebin.com/LfaLkJaTであり、js-animationsモジュールはhttp://pastebin.com/qwnpkCC6です。Chromeでは、コンソールhttp://pastebin.com/Hq7HGcmmでこのエラーが発生します

4

2 に答える 2

1

セットアップの問題は、モジュールの依存関係の名前をで終了することだと思います.js。ドキュメントによると：

また、RequireJSはデフォルトですべての依存関係がスクリプトであると想定しているため、モジュールIDに末尾の「.js」サフィックスが表示されることは想定されていません。RequireJSは、モジュールIDをパスに変換するときに自動的に追加します。

RequireJSがモジュール名で終わる.jsことを確認した場合、モジュール名はドキュメントからの相対パスであると見なされます。モジュールの依存関係の名前を終了する.jsと、RequireJSが依存関係として指定されたファイルをロードするため、開発モードで正常に機能します。あなたの場合、それはファイルをロードしますjs/js-animation.js、匿名defineを見て、モジュールを適切にロードします。

本番環境では、start.jsモジュールにはまだが必要"js/js-animation.js"です。RequireJSは最適化されたモジュールをパスにロードしますjs/js-animation.jsが、オプティマイザーは匿名モジュールを名前付きモジュール（この場合"js/js-animation"）に変換しました。その結果、ファイルはロードされますがdefine、ファイル内の'dモジュールに一致する名前がない"js/js-animation.js"ため、ある意味でアニメーションモジュールが欠落しています。

解決策/TL;DR：.jsすべてのモジュール依存関係名（およびr.js構成のモジュール定義）から末尾を削除すると、問題がないはずです。したがって、次のstart.jsようになります（4行目の変更）：

require([], function () {
  var $html = $("html"),
    animationModule = localStorage['cssanimations'] == 'true' ? 
    'js/css-animation' : 'js/js-animation',
    $doc = $html.find("body");

  console.debug("loading ", animationModule);
  require([animationModule], function( animationModule ) {
    animationModule.run({
      target : $("div.flex")
    });
  } );
} );

また、RequireJS構成でモジュール名をクリーンアップするために使用baseUrlするpathsこともできます（たとえば、js/プレフィックスを削除できるようにするため）。

于 2012-08-18T13:59:50.513 に答える
1

これは、現在のrequire.jsの実装では問題があるようです。それを回避する方法は、グローバルメディエーターまたはメディエーターモジュールを作成し、動的にロードされたすべてのモジュールにメディエーターを呼び出し、イベントを介してアナウンスさせることでした。これは私のために働いた。

于 2012-09-20T06:57:52.970 に答える