目次

WebAssembly (Wasm) コンパイル

目次

Dart チームは、Web 用の Dart および Flutter アプリケーションを構築する際のコンパイルターゲットとして WebAssembly を追加することに興奮しています。

WebAssembly サポートの開発は継続中であり、頻繁な変更が発生する可能性があります。最新の更新については、このページを再確認してください。

WebAssembly サポート

#

現在のバージョンの Dart から WebAssembly へのコンパイルには、いくつかの制限があります。

  1. ガベージコレクション (WasmGC) を使用した WebAssembly をターゲットにしているため、すべてのブラウザーが現在サポートされているわけではありません。現在のブラウザーリストは、Flutter ドキュメントにあります。

  2. コンパイルされた Wasm 出力は現在、(ブラウザーなどの) JavaScript 環境をターゲットにしており、そのため、wasmtime や wasmer などの標準の Wasm ランタイムでの実行は現在サポートされていません。詳細については、issue #53884 を参照してください。

  3. Wasm にコンパイルする場合、Dart の 次世代 JS 相互運用メカニズムのみがサポートされています。

  4. 現在、webdev ツールでの実行 (webdev serve) またはビルド (webdev build) のサポートはありません。以下のステップには、一時的な回避策が含まれています。詳細については、webdev issue 2206 を参照してください。

サポートされているパッケージ

#

Wasm 互換のパッケージを見つけるには、wasm-ready フィルターを pub.dev で使用します。

パッケージが dart:html、dart:js などの非 Wasm 準拠のライブラリをインポートしていない場合、そのパッケージは「wasm-ready」です。許可されていないライブラリの完全なリストは、JS 相互運用ページにあります。

Web アプリを Wasm にコンパイルする

#

Dart および Flutter で Wasm コンパイラを呼び出すためのサポートが dart CLI に追加されました。

$ 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.dart

Wasm コンパイルは安定版で利用可能ですが、まだプレビュー段階です。開発者エクスペリエンスを向上させるためにツールを最適化し続けていますが、ここに概説する一時的な手順に従うことで、今日から Dart を Wasm にコンパイルすることを試すことができます。

  1. Web アプリから始めます: dart create -t web mywebapp

    テンプレートは、Wasm を実行するために必要な package:web を使用して小さな Web アプリを作成します。Web アプリが dart:html から package:web に移行されていることを確認してください。

  2. Wasm でコンパイルし、新しい site 出力ディレクトリに出力します: mywebapp$ dart compile wasm web/main.dart -o site/main.wasm

  3. Web ファイルをコピーします: cp web/index.html web/styles.css site/

  4. Wasm コードをロードする JS ブートストラップファイルを作成します

    新しいファイル site/main.dart.js を追加し、この main.dart.js サンプルの内容で埋めます。

  5. 出力を提供します: dart pub global run dhttpd (ドキュメント)

この小さな例を こちらで試すこともできます。

特に明記されていない限り、このサイトのドキュメントは Dart 3.5.3 を反映しています。ページの最終更新日は 2024-06-17 です。ソースを表示または問題を報告する。