Please enter your password of your account at the remote wiki below.
/!\ You should trust both wikis because the password could be read by the particular administrators.

Clear message

Locked History Actions

Closure_Library/depswriter

DepsWriterを使う

イントロダクション

ClosureBuilderを使うでは、簡単にClosure Libraryのデバッグローダについて触れた。

コンパイルされていないソースを使う場合、goog.require()によってnamespaceが要求されフェッチされるが、それはそのnamespaceを供給するスクリプトのURLをsrcとする<script>タグが追加されることによって行われる。

しかし、Closure Libraryは、そのnamespaceを供給するファイルをどのようにして知ることができるのだろうか。 Closure Libraryにはdeps.jsという名前のデフォルト依存ファイルが含まれる。 このファイルには、ライブラリ中のすべてのJavaScriptファイルが行として記述され、それぞれの行は（base.js相対での）ファイルの位、それが供給するnamespace、それが要求するnamespaceが記述されている。

デバッグモードでは、goog.require()文が要求するnamespaceがもしあればそれを供給するファイルとそのすべての依存をフェッチする。

しかし、Closure Libraryは、そのライブラリについてだけの依存ファイルしか持ちあわせていない。 もし君が自身のnamespaceを作ろうとするなら（確実にそうするだろうが）、君が作成するnamespaceについてdepswriter.pyを使って依存ファイルを作成しなければならない。

依存ファイルの構文

依存ファイルは、base.js中のgoog.addDependency()という関数を使って単純にnamespaceの場所とそれが依存するnamespaceを記述したものである。以下に単純な例を示そう。 

goog.addDependency('dom/forms.js', ['goog.dom.forms'], ['goog.structs.Map']);

これはdom/forms.jsというファイルを登録するものだが、goog.dom.formsというnamespaceを供給し、goog.struicts.Mapというnamespaceを要求するものだ。dom/forms.jsというパスはbase.jsからの相対であることに注意。

DepsWriterの使用

DepsWriterは依存ファイルの作成プロセスを自動化する。これは、 ファイルをスキャンして、goog.require,goog.provideによる供給・要求のnamespaceを認識することによってである。

この例では二つのファイルを用意した。それぞれnamespaceを持ち、一方は他方に依存し、両方はClosure Libraryのnamespaceに依存する。トップのgoog.provide,goog.require文は次のようにする。

In this example, there are two files, each with a namespace, one of which depends on the other, and both of which depend on namespaces in Closure Library. The goog.provide and goog.require statements at the top might look like this: 

goog.provide('myproject.foo');

goog.require('goog.array');
goog.require('goog.dom');
goog.require('myproject.bar');

goog.provide('myproject.bar');

goog.require('goog.string');

myproject.fooはmyproject.barに依存する。 ここで、我々は単一の依存ファイルを作成したい。そうすでばデバッグモードローダはファイルがどこにあるかを知ることができる。

依存ファイルにはbase.jsからの相対パスを指定しなければならないでの、もしbase.js,myproject.fooとmyproject.barのあるファイルが以下のようなURLであるなら、 

http://<server>/closure/goog/base.js
http://<server>/myproject/foo.js
http://<server>/myproject/bar.js

foo.js,bar.jsの相対パスは../../myproject/foo.js及び../../myproject/bar.jsになる。

それぞれの..は親ディレクトリを表す。 ../../という表現はgoog（ディレクトリ）を登り、closureの外に出る。

depswriter.pyでの依存ファイルの生成

DepsWriterを使って、goog.addDependency()によるファイルの登録を行う。

DepsWriter allows us to specify a directory to scan for .js files, along with a custom prefix, with the --root_with_prefix flag. 

$ closure-library/closure/bin/build/depswriter.py  \
    --root_with_prefix="myproject ../../myproject" \
    > myproject-deps.js

This command scans the myproject directory for .js files and writes out a goog.addDependency line for each. The path will be the prefix (here, ../../myproject) combined with the relative path from the root. It assumes we're running from the directory above both the closure-library and myproject directories created in the ClosureBuilder tutorial.

In this case we've written the result into myproject-deps.js with the > operator. You can instead specify an output file using the --output_mode flag. DepsWriter produces the following output: 

// This file was autogenerated by closure/bin/build/depswriter.py.
// Please do not edit.
goog.addDependency('../../myproject/bar.js', ['myproject.bar'], ['goog.string']);
goog.addDependency('../../myproject/foo.js', ['myproject.foo'], ['goog.array', 'goog.dom', 'myproject.bar']);

This file expresses the same dependency information as the goog.provide() and goog.require() statements in the source code. Using a generated dependency file in your project

To include a generated dependency file, just include a <script> tag for it, after base.js. After the tag, you can require your newly specified namespaces: 

<!doctype html>
<html>
  <head>
    <script src="/closure/goog/base.js"></script>
    <script src="/myproject/myproject-deps.js"></script>
    <script>
      goog.require('myproject.foo');
    </script>
  </head>
  <body>
    <!-- content -->
    <script>
      myproject.foo.start();
    </script>
  </body>
</html>

This code loads myproject.foo (and myproject.bar, by dependency), then calls myproject.foo.start() just before the closing <body> tag.

Note that you should only link to base.js and your dependency files in the debug version of your application. When using compiled JavaScript, just include the script tag to load the compiled file.