若干所見殺しだったようなので簡単に説明します。
ルール
- "dart:html"と"dart:io"はどちらか一つしか使えない
- "dart:io"をインポートしたらJSにトランスパイルできない
- "dart:html"をインポートしたらcliで実行できない
"dart:io"はファイルアクセスや生ソケット等の標準ライブラリが入っています。当然ブラウザでは使えないです。
"dart:html"はwindowオブジェクトやHTML要素などが入っています。これはChromeやFFなの機能を呼び出すだけなのスタンドアロンのVMでは使えないです。TypeScriptで言うところのlib.es2016.full.d.tsです。
"dart:html"で遊ぶ方法はこちらです。
まずFile構成はこんな感じです。
- hoge
- web/
- index.html
- index.dart
- pubspec.yaml
ディレクトリ名の「web」は規約なので変えられないです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Top</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script defer src="index.dart.js"></script>
</body>
</html>
import 'dart:html';
void main() {
var message = new DivElement()..text = "いえーい";
document.body.append(message);
}
これでpub serveコマンドを打つと
Serving [prjname] web on http://localhost:8080
とか言われるのでそこにアクセスしてください。
気が済んだら pub build するとJSが./buildディレクトリに吐き出されます。
解説
pub serveとは？
webpack-dev-server的なものです。Dartは自動的にトランスパイル+連結されます。
DivElementとdocumentはどこから来た？
"dart:html"からです。
どうしたら書いたDartがブラウザで実行できるの？
"${dart_file_name}.js"にアクセスするとJSが取得できます。
main.dartならmain.dart.js、love.dartならlove.dart.jsです。
pub serverはhoge.dart.jsにアクセスが来るとhoge.dartを探し出してそれをトランスパイルしてレスポンスしてくれます。
だらか<script src="hoge.dart.js">タグで読み込みましょう。
補足
HTMLに書き込んだButtonにリスナーを設定したい
document.getElementById(elementId)かquerySelector(selectors)を使ってbuttonを取得してそこにイベントリスナーを設定してください。
(querySelector('#button') as ButtonElement)
..onClick.listen((_) => print("うぇーい"));
querySelectorとかがグローバルに生えてるのいやなんだけど
"dart:html" as sukina_namae
sassが使いたい
たぶんこの質問が出てくるということはgulp-webserverに何もかもやってもらってる人だと思います。
pubにはtransformerという仕組みがあり、ここでpub serve時とpub buildに処理を挟めます。
dependencies:
dart_sass_transformer: any
transformers:
- dart_sass_transformer
こんな感じで使えます。
ほかの記事に<script src="packages/browser/dart.js">ってのがあったんだけどなにこれ
packages/browser/dart.jsを見てもらえばわかりますが、HTML上のscriptタグの中で拡張子がdartなものを全部hoge.dart.jsに置き換えてるだけのものです。
pubspec.yamlに browser: ^0.10.0 を追加すると使えます。
dartiumとの連携に便利だったりするので使われているイディオムです。
<script src="index.dart" type="application/dart"></script>
<script src="packages/browser/dart.js"></script>
<!--<script src="index.dart.js"></script>-->