前提・経緯
- Djangoアプリケーション用の、javascriptが複雑で管理が大変になってきたので、Haxeを使ってみることにした。
- Haxeは、Sublime Text 3 からビルドしている。（あまり関係ないけど）
- コンパイル後の javascript は、どうやってデバッグするのか？
- http://localhost:8000/ や運用しているサーバー上で動いている状態で、ブラウザからデバッグする。.hxにブレイクポイントも入れたい。
解決手段
結論から言えば、-debug と -cmd オプションで、ソースマップを出力してhxと一緒に静的フォルダ（STATIC_ROOT）に突っ込めばよい。
具体的には・・・・
haxe -debugオプションでソースマップの生成
-debugオプションで、builder.js.map （出力ファイル名+".map"）が自動生成される。
しかしながら、mapファイルは、デフォルトで "file://C:/Users/USERNAME/XXXX” などの、ローカルストレージにアクセスするような出力結果になっているので、そのままでは404エラーが出たりして使えなかったり、そもそも誤って公開してしまったら恥ずかしい・・・。
そこで、mapファイルは、-cmdオプションを使って実行するコマンドによって、修正を行う。
haxe -cmd オプションを利用
haxeコマンドでは、-cmd オプションを用いれば、Haxeのビルド時に任意のコマンドが実行できる。
SublimeTextでは、Ctrl+BあるいはF７キーでbuild.hxml（プロジェクトディレクトリに配置）の情報に基づいてビルドが行われる。
build.hxmlに -cmd オプションにバッチファイルを指定すれば複数の処理をビルド成功時に自動で実行できる。
仮に、build.batというバッチファイルだとすれば次のようなbuild.hxmlとなる。
-js builder.js
-main Builder
-cmd "build.bat"
-debug
バッチファイル
@echo off
chcp 65001
python fixmap.py
copy builder.js ..\XXX\YYY\js\builder.js
copy builder.js.map ..\XXX\YYY\builder.js.map
copy *.hx ..\XXX\YYY\
echo Batchcomplete
文字コードに注意
気をつけることは、Windows7では、cp932がデフォルトの文字コードになっているので、chcpコマンドでUTF-8にエンコーディングを変更している。
これを忘れると、結果は
[Decode error - output not utf-8]
となる。
DjangoのSTATIC_ROOTにファイルを移動
copy しているのは、Djangoの静的フォルダ（STATIC_ROOT）に、js,map,hxファイルを移動しているだけだ。
スクリプトでファイルを修正
バッチファイルから、スクリプト(この例では、fixmap.py)を実行する。
python fixmap.py
バッチファイルのみで、すべての後処理（mapファイルの修正）をやっても良いが、記述が大変なので、python スクリプトに肩代わりしてもらうことにする。
あとは、fixmap.py では好きなようにjsやmapなどの出力結果を修正しておけばいい。
次のスクリプトは例
# coding: utf-8
#ソースマップファイルに対する処理
def mapfunc(line):
line = line.replace("file://","")
line = line.replace("C:/Users/XXX/YYY/haxe/","/static/debug/");
line = line.replace("C:/HaxeToolkit/haxe/","/static/debug/");
return line
#ソースファイルに対する処理
def source(line):
line = line.replace("//# sourceMappingURL=builder.js.map","//# sourceMappingURL=../debug/builder.js.map")
return line
#ファイルを開いて、funcの処理を行って上書きする。
def overwrite_contents(filename,func):
#読む
with open(filename, 'r',encoding='utf-8') as f:
contents = f.readlines()
f.close()
#書き換え
out_lines = "";
for line in contents:
line = func(line)
out_lines += line
#上書き
f = open(filename, 'w',encoding='utf-8')
f.write(out_lines)
f.close()
#上書き（書き換え、修正）
overwrite_contents("builder.js",source)
overwrite_contents("builder.js.map",mapfunc)
ローカルファイルへの絶対パスを、
ドメインルート（localhost:8000/など）からの相対パスに書き換えている。
注意事項としては、Haxeのライブラリもhxファイルなので、必要に応じて、これも事前にSTATIC_ROOTにコピーしておいたほうがいい。
C:/HaxeToolkit/haxe/
それから、encoding='utf-8' を忘れると、エラーが出たり文字化けしたりするので注意。
デバッグ
説明する必要はないかと思いますが、ブラウザの開発者モードというか、デバッグ機能で、ソースマップが有効になっているか確認してください。
.hxファイルにもブレイクポイントを入れてデバッグすることが出来るようになります。
hxファイルの文字化け
ブラウザ上でデバッグ時に、.hxファイルが文字化けする。
回避のために、hxファイルの先頭に、日本語を書けばいいみたい。（少なくともChromeでは）
どこかで設定できないのだろうか？
まとめ
結構、面倒くさい・・・。
ソースマップ生成時のルールとかソースルートの指定方法はないのだろうか。