プログラム学習室 http://studyhallweb.com/

Dart から JavaScript への変換

各ディレクトリの位置関係

Dartがネイティブで動作する環境は限られるため、このサイトでもJavaScriptに変換して使っています。
JavaScriptへの変換作業自体は簡単なのですが、それをWebサイトにアップして動かすために、このサイトでは少し工夫しています。
説明をしやすくするために、まずは、ディレクトリの位置関係から。

開発環境のローカルのディレクトリは次のようになっています。
ディレクトリ関係図
Dart Editor には studyhall 以下のディレクトリが取り込まれています。
build, packages, web は Dart Editor によって自動作成されます。
Webサイトのルートに当たるのが webディレクトリです。
このページは stydyhall\web\dart\page024.html になります。

web 以下の各ディレクトリには packages のディレクトリが自動で作成されます。
この packages は上図でわかるようにリンクです。

このサイトでは、汎用的な Dartスクリプトは stydyhall\web\src に入れています。
特に機能を追加していない標準的なページでは、スクリプトの呼び出しは次のようになっています。
      <script type="application/dart" src="../src/main.dart"></script>
      <script src="../packages/browser/dart.js"></script>
					

JavaScriptへの変換

Dart Editor で Dart プログラムを JavaScript に変換する方法は、2つあります。
1つは、メニューから Tools -> Pub Bulid(generates JS) を実行
Run Build with Menu

もう1つは、pubspec.yaml から Run pub build を実行します。
Run Build with Menu
どちらも、先に Pub Get を実行しておく必要があります。

コンパイルされた JavaScript のありか

上記の方法で作成された JavaScript は、build ディレクトリ内にできます。
buildディレクトリの中には、webディレクトリ以下がまるまるできています。
Buildディレクトリ
ただし、各ディレクトリにあった packages はなくなって、web 直下の packages のみとなり、リンクから実体のあるファイル・ディレクトリになっています。

ちなみに、Windowsの環境の場合だけかもしれませんが、この build ディレクトリをエクスプローラで開いたまま Pub build を実行するとエラーが発生します。 しかし、続けて Pub build を実行すれば大丈夫です。
build 以下をいったん削除して、まるまる新規作成しているためだと思われます。

Dartファイルと同じディレクトリに JavaScriptのファイルが出来ます。
1つの Dart ファイルから 下図のように3つのファイルができますが、必要なのは .dart.js ファイルです。
作成されたファイル

サイトへのアップロード

build ディレクトリの中の web ディレクトリ以下を アップロードすれば良いのですが、 build の中のファイルは全て新規作成されたもののため、タイムスタンプ比較による差分アップロードが出来ません。

build の中にできた、 JavaScript(.dart.js ファイル) を 原稿の入っている web ディレクトリ以下にコピーして、 web ディレクトリからアップロードすれば差分はとれますが、 この web ディレクトリ以下には 各所に pagckages があり重複します。

そこで、このサイトでは FTPアップロード用のディレクトリをつくり、web ディレクトリの中から不要な packages を除いてコピーしています。
必要な packages は web直下の packages です。これは buildディレクトリの中に唯一残る(作成される)ものです。
もちろん、JavaScriptのファイルもbuildからコピーしてきます。