17

プロジェクトのパッケージングを dojo から google クロージャーに切り替えようとしていますが、これまでのところ成功していません。以下は、私たちが達成しようとしていることを示す簡単な例です。


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="runtime/src/core/lib/goog-rev26/base.js"></script>
        <script>
            goog.require("foo.bar");
            function main() {foo.bar.echo("hello world")}
        </script>
    </head>
<body onload="main()">
</body>
</html>

それから/foo/bar.js私は持っています:


goog.provide("foo.bar");
foo.bar.echo = function(s) {console.debug(s);}

firebug で受け取るエラーは次のとおりです。

goog.require が見つかりませんでした: foo.bar
foo が定義されていません

[ネット] タブを見ると、ファイルを取得するための http 要求がありません。クロージャ ライブラリがスクリプト タグを生成して fetch することを期待していましたbar.js。

ヘルプ！;)

4

7 に答える 7

14

私はそれを理解し、それほど難しくはありませんが、いくつかの落とし穴があります.

基本的に、いくつかのモードのいずれかで、依存関係生成スクリプト calcdeps.py ( calcdeps.py docs を読む必要があります) を使用できます。

  1. deps.js ファイルの生成
  2. すべてを 1 つのファイルに連結し、必要に応じてクロージャ コンパイラを使用してコンパイルします。

依存関係ツリーに変更を加えない限り、JS ソースの編集後に calcdeps.py を実行しないようにするため、開発には (1) を使用する必要があります。残りの答えはこの方法についてです。他の方法はまだ試していません。

これを生成するために私がしたことは次のとおりです。

#!/bin/bash
cd closure-library/closure/goog
python ../bin/calcdeps.py -p ../../../js -o deps > ../../../my-deps.js

...次のディレクトリ構造を想定しています。

project/
  closure-library/ (as checked out from SVN)
  js/ (my JS code)
  app.html

(-pパラメーターは、指定されたディレクトリ内のすべての js ファイルをトラバースし、必要に応じて検索する複数のディレクトリを指定できるとドキュメントに記載されています。)

上記の呼び出しにより、メインの app.html の隣に my-deps.js ファイルが作成されます。これを使用して、アプリケーションを実行します。作成されたファイルには、JS ファイルに関する情報が含まれてjs/おり、次のようになります。

goog.addDependency('../../../js/controllers.js', ['proj.controllers'], []);
goog.addDependency('../../../js/ui.js', ['proj.ui'], ['proj.controllers']);

- 最初の文字列は、 closure-library/closure/goog/base.js に相対的なJS ファイルへのパス(これは重要です!)、2 番目の配列はgoog.provide-d 文字列のリスト、最後の配列はリストです。goog.require-d 文字列の。

今app.htmlに私は持っています:

<script src="closure-library/closure/goog/base.js"></script>
<script src="my-deps.js"></script>
<script>
  goog.require("proj.ui");
</script>
<script>
  // here we can use the required objects
</script>

ノート：

  1. クロージャーのbase.jsを含めることに加えて、生成したdeps.jsを含めます
  2. チュートリアルで述べたように、goog.require呼び出しは別の script タグにある必要があります。これは、必要なスクリプトを読み込むために script タグを追加し、現在の script タグが処理を終了した後に読み込まれるためです。

落とし穴:

  1. 上記の問題は、パスが base.js に関連しています。goog.requirebase.js ベース URL (つまり、base.js リーフ名なし) と deps.js の goog.addDependency の最初のパラメーターを連結して、ロードするスクリプト URL を作成します。
  2. calcdeps.py は Windows ではうまく動作しません。特に、deps.js 文字列リテラルでバックスラッシュを使用するとうまくいきません。
  3. 何かがうまくいかない場合は、calcdepsに言及しているすべての問題に目を通し、チェックアウトが最新であることを確認してください。
于 2010-01-05T16:09:25.790 に答える
8

アップデート！！！

新しいバージョンの calcdeps.py はゲームを少し変更します。deps.js を作成するには、-d フラグを使用する必要があります。例えば：

python path-to-closure-library/closure/bin/calcdeps.py -i path-to-your-src/requirements.js -o deps -d path-to-closure-library/closure/ -p path-to-your-src/ --output_file=path-to-your-src/deps.js

コンパイルする：

python path-to-closure-library/closure/bin/calcdeps.py -i path-to-your-src/requirements.js -d path-to-closure-library/closure/ -p ./ --output_file=path-to-your-release/scripts.min.js -c path-to-compiler/compiler.jar -f "--compilation_level=ADVANCED_OPTIMIZATIONS" -f "--debug=true" -f "--process_closure_primitives=true" -f "--manage_closure_dependencies=true" -o compiled

したがって、プロセスは実際にははるかに簡単になりましたが、ESP の力を使用して、完全に文書化されていないことを確認する必要があります。calcdeps.py は、Windows 上の Python 3.1 でも動作しないようになったため、これもまた楽しみの山です。いくつかのハックでうまくいきました（私はPythonプログラマーではなく、もっと良い方法があるはずなので、ここには入れません）。

一般的に、最終日はとても楽しかったです。この投稿が誰かが同じ楽しみを避けるのに役立つことを願っています.

グイド

于 2010-07-14T21:46:09.043 に答える
1

はい、calcdepds.pyを使用する必要があります。これを行うための最良の方法を見つけるために、多くの試行錯誤の末に大きなブログ投稿を作成しました。また、dojo.requireとgoog.requireの違いについても説明します。

http://apphacker.wordpress.com/2009/12/28/howto-how-to-use-goog-require-and-goog-provide-for-your-own-code/

于 2009-12-28T23:39:42.320 に答える
0

これは、私が取り組んでいる小さなプロジェクトで、あなたに役立つかもしれません: http://github.com/fintler/lanyard

build.xml、lanyard.js という名前のファイル、および src/geom/* にあるすべてのファイルを見てください。

build.xml には、src にあるすべての js に対して ant を介して calcdeps.py を呼び出す方法の例があります。最善の方法ではないかもしれませんが、これまでのところうまくいっています。

于 2010-02-23T17:32:21.607 に答える
0

少なくとも開発バージョンでは、カスタム モジュールを機能させるいずれかの方法は、google の base.js ファイルを含めた後に、html ページの head セクションに手動で js ファイルを含めることです。

<script type="text/javascript" src="js/closure/goog/base.js"></script>
<script type="text/javascript" src="js/closure/custom/custom.js"></script>
<script type="text/javascript" src="js/closure/custom/sub/sub.js"></script>
...

ただし、含める順序は自分で気にする必要があります。カスタムファイルセットがそれほど大きくない場合は、うまく機能します。製品版の場合でも、js ソース コンパイルを使用して、クロージャ ライブラリのすべての利点を得る必要があります。

于 2010-11-11T11:58:28.693 に答える
0

解決：

  • プロジェクトの外部 (またはアセットなど) にクロージャーをダウンロードします。

  • onload、delay、async などの設定に煩わされないでください。

  • それらは機能しません (それらはまた、非常に貧弱なデザインパターンであり、非常に不自由です..)

- これは、main.jsコードを DOM に動的に挿入する場所です (たとえば、ブックマークレットなどを作成します):

/**
 * loads the base.js of google closure.
 * http://code.google.com/p/closure-library/
 */

(function() {
  var s = document.createElement('script');
  s.type = "text/javascript";
  s.src = "./assets/closure/goog/base.js";
  s.async = true;
  document.getElementsByTagName("body")[0].appendChild(s);
}());

/**
 * activated from the base.js as JSONProtocol.
 */
window['starter'] = function() {
  console.log("hi...");
};

今：

  • あなたの編集base.js

ファイルの末尾を追加します

......
.......
........

/**
 * run the method when done load. just like JSONProtocol.
 */
window.setTimeout(function() {
  window['starter']();
}, 5);

  • 「コールバック」は、ファイルのレンダリングが完了したときにスターターをアクティブにするだけです。

  • それは完全に機能し、すべてのリソースを非同期にロードし続けます。

ps

  1. window['....'] 構文は、クロージャーコンパイラーを最大限に安全に使用し、常に同じ名前を使用できるようにするためのものです (ただし、別の方法もありますが、これは単純な「常に機能する」方法です。 .)。

2.base.jsタイムアウトを回避して使用することもできます

......
.......
........

/**
 * run the method when done load. just like JSONProtocol.
 */
window['starter']();

しかし、経験則として、最新のブラウザーは、「気にしないで、JSONProtocol コールバックのように、最後にこれを実行するだけ」のものをラップすると、より適切に動作します-

タイムアウト (主に 0 ～ 5 の値で使用) は、タイムアウトとして中断されるのではなく、コード ブロックの同期性を壊して真の「コンテキスト スイッチ」のような動作を可能にする方法として中断されます。

そこには余分なオーバーヘッドがありますが。

于 2013-06-21T02:12:32.540 に答える