webdev

このページでは、アプリのコンパイルに webdev を、アプリのテストに build_runner を使用する方法について説明します。

webdev の使用を開始するには、これらの手順に従ってください。

webdev を使用する前に、build_runner および build_web_compilers パッケージをアプリの依存関係に追加します。build_runner パッケージは、webdev にスクリプト機能を追加します。

dart pub add build_runner build_web_compilers --dev

dart pub を使用して、すべてのユーザーのために webdev をインストールします。

dart pub global activate webdev

同じコマンドを使用して webdev をアップデートします。Dart SDK をアップデートしたとき、または webdev コマンドが説明できない方法で失敗したときに webdev をアップデートしてください。

webdev を使用するには、build_runner および build_web_compilers パッケージに依存するパッケージのルートディレクトリにいる必要があります。アプリをテストしている場合は、build_test にも依存している必要があります。

これらのパッケージに依存するには、アプリの pubspec.yaml ファイルに次の dev_dependencies を追加します。

  dev_dependencies:
    # ···
    build_runner: ^2.4.15
    build_test: ^2.2.3
    build_web_compilers: ^4.1.5

通常どおり、pubspec.yaml の変更後に dart pub get または dart pub upgrade を実行します。

dart pub get

このツールは 2 つの方法でコンパイルできます。デバッグが容易な方法（serve）と、小さく高速なコードを作成する方法（build）です。

開発用コンパイラは増分更新をサポートし、非同期モジュール定義 (AMD) モジュールを生成します。 webdev serve を使用すると、Dart ファイルを編集し、Chrome でリフレッシュして、編集内容をすぐに確認できます。この速度は、アプリが必要とするすべてのパッケージではなく、更新されたモジュールをコンパイルすることによって実現されます。

最初のコンパイルは、アプリ全体をコンパイルするため、最も時間がかかります。 serve コマンドが実行されている間、後続のビルドはより速くコンパイルされるはずです。

本番用コンパイラは、単一の最小化された JavaScript ファイルを生成します。

このセクションでは、次のコマンドの使用方法について説明します。

webdev serve

JavaScript アプリを継続的にビルドする開発用サーバーを実行します。

webdev build

デプロイ可能なバージョンの JavaScript アプリをビルドします。

build_runner test

テストを実行します。

ビルド構成ファイルを使用してビルドをカスタマイズできます。ビルド構成ファイルの詳細については、build_web_compilers パッケージを参照してください。

Web アプリの開発用バージョンをサービスするには、次のコマンドを実行します。

$ webdev serve [--debug | --release] [ [<directory>[:<port>]] ... ]

このコマンドは、アプリをサービスし、ソースコードの変更を監視する開発用サーバーを起動します。デフォルトでは、このコマンドは localhost:8080 でアプリをサービスします。

webdev serve

最初の webdev serve のコンパイルは遅いです。最初のコンパイル後、アセットはディスクにキャッシュされます。これにより、後続のビルドはより速くコンパイルされます。

Dart DevTools を有効にするには、--debug フラグを追加します。

webdev serve --debug  # enables Dart DevTools

開発用コンパイラではなく本番用コンパイラを使用するには、--release フラグを追加します。

webdev serve --release  # uses production compiler

異なるディレクトリ-ポート構成を指定できます。

たとえば、次のコマンドはテストポートをデフォルト（8081）から 8083 に変更します。

webdev serve web test:8083 # App: 8080; tests: 8083

次のコマンドを使用してアプリをビルドします。

$ webdev build [--no-release] --output [<dirname>:]<dirname>

デフォルトでは、build コマンドは本番用 JavaScript コンパイラを使用してアプリの本番用バージョンを作成します。開発用 JavaScript コンパイラでコンパイルするには --no-release を追加します。--output オプションを使用して、Dart がプロジェクトのトップレベルフォルダをコンパイルし、出力を書き込む場所を制御します。

次のコマンドは、プロジェクトのトップレベル web フォルダを build ディレクトリにコンパイルする方法を示しています。このコマンドはデフォルトで本番用 JavaScript コンパイラを使用します。

webdev build --output web:build

build_runner test コマンドを使用して、アプリのコンポーネントテストを実行します。

dart run build_runner test [build_runner options] -- -p <platform> [test options]

たとえば、すべての Chrome プラットフォームテストを実行する方法を次に示します。

dart run build_runner test -- -p chrome

利用可能なすべての build_runner オプションを表示するには、--help または -h オプションを使用します。

dart run build_runner test -h

Dart は、空の -- 引数以降の引数を test パッケージランナーに直接渡します。test パッケージランナーのすべてのコマンドラインオプションを表示するには、このコマンドを使用します。

dart test -h

webdev オプションの完全なリストについては、webdev --help を実行するか、webdev パッケージを参照してください。

次のページも参照してください。

• build_runner: build_runner とその組み込みコマンドを紹介し、詳細情報へのリンクを提供します。
• build_web_compilers: ビルドの構成に関する情報があり、dart2js_args を使用して コンパイラオプションを指定する例が含まれています。