WebAssembly (Wasm) コンパイル
Dart チームは、Web 用の Dart および Flutter アプリケーションをビルドする際のコンパイルターゲットとして WebAssembly を追加できることを嬉しく思います。
WebAssembly サポートの開発は継続中であり、頻繁な変更が発生する可能性があります。最新の情報については、このページを再度ご確認ください。
WebAssembly サポート
#WebAssembly への Dart コンパイルの現在のバージョンには、いくつかの制限があります。
ガベージコレクション (WasmGC) を持つ WebAssembly をターゲットとしているため、現在すべてのブラウザがサポートされているわけではありません。現在のブラウザのリストは、Flutter ドキュメント で確認できます。
コンパイルされた Wasm 出力は現在 JavaScript 環境 (ブラウザなど) をターゲットとしており、そのため現在 wasmtime や wasmer のような標準的な Wasm ランタイムでの実行はサポートされていません。詳細については、issue #53884 を参照してください。
Wasm にコンパイルする場合、Dart の 次世代 JS 相互運用メカニズム のみがサポートされます。
現在、
webdevツールでの実行 (webdev serve) またはビルド (webdev build) のサポートはありません。以下の手順には一時的な回避策が含まれています。詳細については、webdev issue 2206 を参照してください。
サポートされているパッケージ
#Wasm 互換パッケージを見つけるには、pub.dev で wasm-ready フィルターを使用してください。
パッケージが「wasm-ready」であるとは、dart:html、dart:js などの Wasm 非準拠ライブラリをインポートしないことを意味します。禁止されているライブラリの完全なリストは、JS 相互運用ページ で確認できます。
Web アプリを Wasm にコンパイルする
#dart CLI に、Dart および Flutter で Wasm コンパイラを呼び出すサポートを追加しました。
dart help compile wasm
Compile Dart to a WebAssembly/WasmGC module.
Usage: dart compile wasm [arguments] <dart entry point>
-h, --help Print this usage information.
-o, --output Write the output to <file name>.
This can be an absolute or relative path.
-v, --verbose Print debug output during compilation
--enable-asserts Enable assert statements.
-D, --define=<key=value> Define an environment declaration. To specify multiple declarations, use multiple
options or use commas to separate key-value pairs.
For example: dart compile wasm -Da=1,b=2 main.dartWasm コンパイルは安定版で利用可能ですが、まだプレビュー段階です。開発者エクスペリエンスを向上させるためにツールの最適化を継続していますが、ここで説明する一時的な手順に従うことで、今日から Dart を Wasm にコンパイルすることを試すことができます。
Web アプリから始めます:
dart create -t web mywebappこのテンプレートは、Wasm を実行するために必要な
package:webを使用した小さな Web アプリを作成します。Web アプリがdart:htmlからpackage:webに 移行 されていることを確認してください。Wasm を使用して新しい
site出力ディレクトリにコンパイルします:mywebapp$ dart compile wasm web/main.dart -o site/main.wasmWeb ファイルをコピーします:
cp web/index.html web/styles.css site/Wasm コードをロードするための JS ブートストラップファイルを作成する
新しいファイル
site/main.dart.jsを追加し、このmain.dart.jsサンプル の内容で埋めます。出力を提供します:
dart pub global run dhttpd(ドキュメント)
この小さな例も こちら で試すことができます。