Home
Title list
RSS
AdminDart のインストールとコンパイル (Windows)
Google が JavaScript に代わる言語として Dart を出して来ました。
今回はこの Dart のインストールと JavaScript への変換(コンパイル) 方法についての記事です。
Dart が目標としている用途は JavaScript のようにブラウザーが直接読み取って実行することです。 ただ、当分の間は JavaScript に変換して使うことなると思うので、コンパイルも必要でしょう。
Dart Editor と SDK
Dart は Dart Editor と SDK の 2 種類のパッケージで公開されています。Dart SDK は Dart のコマンドラインツールのセットです。 コンパイルするだけなら、こちらで十分です。
Dart Editor は Editor という名前ですが、 Visual Studio のような IDE に近いものです。
コンパイルだけなら必要ありませんが、 デバッグに役立ちそうですし、 Dart Editor のパッケージには SDK も含まれるので、 こちらをインストールすることにします。
ちなみに、 Dart を実行できる Chrome(Dartium) も公開されています。
インストール
(0.) DartEditor は Java を使用するため、 入ってない場合は以下のサイトからダウンロードしてインストールしてください。1. Dart のサイトから PC 環境にあった zip ファイル(darteditor-winXX-XX.zip) をダウンロードします。
2. zip ファイルをインストールしたいところに解凍します。
3. 解凍後の dart フォルダー内に DartEditor.exe があるので、 実行してみて下さい。 正常に実行できていれば完了です。
(4.) エディターを使わずにコンパイラーを直接呼び出して使いたい場合は、 解凍した dart/dart-sdk/bin フォルダーのフルパスを環境変数 Path に追加します。
Dart Editor の実行でエラーが発生する場合
環境によっては DartEditor.exe の実行時に次のようなエラーメッセージが出る場合があります。Failed to create java virtual machineこの場合は DartEditor.exe と同じフォルダー内にある DartEditor.ini ファイルの -vmargs の行を削除します。
-data @user.home\DartEditor -vmargs -Dosgi.requiredJavaVersion=1.6 -XX:MaxPermSize=256m -Xms40m -Xmx1024m
コンパイル
JavaScript への変換(コンパイル)には dart2js.bat を使用します。まず、適当な Dart のファイルを作成しておきます。
hello.dart :
import 'dart:html'; main() { var msg = query('#msg'); var btn = new ButtonElement(); btn.text = 'Click me!'; btn.on.click.add((e) => msg.text = 'Dart!'); document.body.nodes.add(btn); }
コンパイルには次のようなコマンドを実行します。
dart2js.bat [オプション] 入力ファイル
> dart2js.bat -ohello.js hello.dart実行するとオプションを指定していない場合は out.js という名前で JavaScript ファイルが生成されます。 出力ファイル名を指定する場合は -o オプションを使用します。
オプション
dart2js のオプションには次のようなものがあります。| オプション | 機能 |
|---|---|
| -o<file>, --out=<file> | 出力ファイルの指定 (-o の後にはスペースを入れません) |
| -c, --enable-checked-mode, --checked | チェックモード (実行時型チェックのコードを挿入し、違反時にアサートできるようにします) |
| -h, /h, /?, --help | ヘルプの表示 (-v と一緒に指定すると詳細なヘルプになります) |
| -v, --verbose | 詳細情報の表示 |
| -p<path>, --package-root=<path> | インポート用のパッケージパスの指定 |
| --minify | 出力コードを難読化 (空白、コメントなどを取り除いたコードを生成します) |
| --suppress-warnings | ワーニングを非表示 |
| --enable-diagnostic-colors | エラーメッセージを色付きで表示 |
ソースマップ
コンパイル時に JavaScript のファイルだけでなく、 JavaScript のファイル名の後に .map をつけたファイル(hello.js.map) も一緒に生成されます。これはソースマップと呼ばれるもので、 Chrome や Firefox でのデバッグ時に使用します。 これを使うと JavaScript ファイル上のエラー発生箇所と一緒に Dart ファイルでの対応箇所も表示することができます。
スポンサーサイト
- 2012-10-31
- | コメント(0)
- | トラックバック(0)
- | Edit
- |
JavaScript の軽量化(難読化)ツール
前回 、
JavaScript に変換して使う言語を紹介しました。
どうせならもう一手間かけて、リリースする際は軽量化(難読化)もしておきましょう。
という事で、今回は軽量化ツールの紹介です。
かしこいものになってくるとコードをより短い表現に変換したり、 使っていないコードを削除してくれたりもします。
コードの改変までやるのは不安を感じる人もいるかもしれませんが、 たいていのツールはオプションで指定しないかぎり、かってにそこまでやることはありません。
new Array(1, 2, 3, 4) => [1,2,3,4]なお、前回紹介した言語の中では、 Dart はオプションによって、 軽量化した状態のコードを生成することができます。
紹介する軽量化ツールはバッチ処理などをしやすいコマンドラインのものです。
| ツール | プラットホーム | 必要なもの |
|---|---|---|
| UglifyJS | クロスプラットホーム | Node.js |
| Microsoft Ajax Minifier | Windows | |
| JSC | Windows | |
| Google Closure Compiler | クロスプラットホーム | Java |
公開されている JavaScript ファイルを見たい場合などに 軽量化(難読化)を戻したい時があります。 この軽量化の逆は beautify や decompress と呼ばれています。
上記のツールの中では UglifyJS はこれが可能です。
しかし、そんなに行う処理でもないため、オンライン版で十分だと思います。
UglifyJS
JavaScript の解析、軽量化、整形ツールです。 Node.js がインストール済みであれば、一番簡単にインストールできます。インストール
Node.js がインストールされていない場合は、まず Node.js をインストールします。 インストール方法は CoffeeScript または TypeScript の記事を見てください。以下のコマンドを実行すると、ネットワークから取得してインストールしてくれます。
> npm install -g uglify-js
使い方
軽量化する場合には次のようなコマンドを実行します。uglifyjs [オプション] 入力ファイル
> uglifyjs -o hello_c.js hello.jsデフォルトでは軽量化後のソースは標準出力に出ます。 出力ファイルを指定するためには -o オプションを使用します。
オプションは必ず入力ファイルの前に記述して下さい。 後ろに書いたものは認識してくれません。
その他のよく使いそうなオプションをあげておきます。
| オプション | 説明 |
|---|---|
| -b, --beautify | 整形(軽量化の逆) |
| -o, --output <file> | 出力ファイルの指定 |
| --overwrite | 軽量化後のコードで入力ファイルを上書きします |
| --unsafe | コードをより短い表現に変換 |
使用法の詳細は以下のページを参照して下さい。 -h などでヘルプを表示することはできません。
Microsoft Ajax Minifier
Microsoft 製の軽量化ツールです。インストール
Microsoft のサイトからインストーラー(AjaxMinSetup.msi)をダウンロードし、 実行します。 以下のフォルダーにインストールされます。
c:\Program Files\Microsoft\Microsoft Ajax Minifier環境変数 Path に追加するか、 スタートメニューに追加された ［ Microsoft Ajax Minifier ］→［ Microsoft Ajax Minifier Command Prompt ］ の項目から使用します。
使い方
軽量化する場合には次のようなコマンドを実行します。ajaxmin [オプション] 入力ファイル
> ajaxmin hello.js -o hello_c.jsデフォルトでは軽量化後のソースは標準出力に出ます。 出力ファイルを指定するためには -o オプションを使用します。
短くするためのコードの改変まで行う場合は -hc オプションもつけます。
> ajaxmin -hc hello.js -o hello_c.js
その他のオプションは次の方法でみることができます。
- -? オプション
- スタートメニュー
［ Microsoft Ajax Minifier ］→［ Microsoft Ajax Minifier Documentation ］
JSC (JavaScript Compressor)
exe ファイル一つで動作するので、一番お手軽です。 ただし、 コードの改変までは行なってくれないようです。インストール
以下のサイトから zip ファイル(JSC-X.X.zip)をダウンロードします。 zip ファイル内の JSC.exe ファイルを Path の通ったフォルダーに置きます。
ここで一つ注意点があります。
.NET のコマンドラインツールに同名のプログラム jsc.exe(JScript Compiler) が存在します。 紛らわしいので、 jsm.exe などの別名にしておいた方が良いでしょう。
使い方
軽量化する場合には次のようなコマンドを実行します。jsc 入力ファイル [出力ファイル]
> jsc hello.js hello_c.js出力ファイルを省略した場合は jsc-compressed-MM-DD-YYYY.js の名前で生成されます。
入力ファイルも省略するとバージョン情報や使用法が表示されます。
コマンドオプションはありません。
Google Closure Compiler
Google 製の軽量化ツールです。インストール
Java を使用するため、入ってない場合は以下のサイトからインストールしてください。以下のサイトから zip ファイル(compiler-latest.zip)をダウンロードします。 zip ファイル内の compiler.jar ファイルを好きなディレクトリーにおいて下さい。
使い方
軽量化する場合には次のようなコマンドを実行します。java -jar "compiler.jarのパス" --js 入力ファイル --js_output_file 出力ファイル
$ java -jar compiler.jar --js hello.js --js_output_file hello-compiled.jsオプションを指定しない場合は、入力が標準入力、出力が標準出力です。
--js オプションを複数書くことによって、結合して軽量化したファイルを生成することができます。
$ java -jar compiler.jar --js util.js --js hello.js --js_output_file hello-compiled.js
コードの改変まで行う場合は、 --compilation_level ADVANCED_OPTIMIZATIONS オプションをつけます。
$ java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js hello.js --js_output_file hello-compiled.js使用法の詳細は以下のサイトを見て下さい。
追記
最初、用語には一番よく使われているかなと思い、難読化を使っていました。 しかし、 軽量化 も結構使われているようなので、軽量化に変更しました。コードを読みづらくすることが目的ではなく、 短くした結果読みづらくなるだけなので、呼び方としては軽量化の方が個人的にはいいんじゃないかと思います。
圧縮 という言葉も使われますが、こちらは zip のような圧縮をまず連想します。 しかもサーバー側の設定によっては、 gzip で圧縮した html や JavaScript などのファイル (html.gz, js.gz) を通常のファイルのように使うこともできます。
そのため、 圧縮はちょっと紛らわしいでしょう。
ちなみに英語では、なんとなくですが minify が最近の主流っぽいです。
- 2012-11-10
- | コメント(0)
- | トラックバック(0)
- | Edit
- |
