內容

此頁面說明如何使用 webdev 編譯您的應用程式,以及使用 build_runner 測試您的應用程式。

設定

#

請遵循這些說明開始使用 webdev

在您使用 webdev 之前,請將相依性新增至 build_runnerbuild_web_compilers 套件到您的應用程式。build_runner 套件會將指令碼功能新增至 webdev

$ dart pub add build_runner build_web_compilers --dev

安裝和更新 webdev

#

使用 dart pub所有使用者 安裝 webdev

$ dart pub global activate webdev

使用相同的指令更新 webdev。當您更新 Dart SDK 或當 webdev 指令以您無法說明的方式失敗時,請更新 webdev

依賴 build_* 套件

#

若要使用 webdev,您必須位於相依於 build_runnerbuild_web_compilers 套件的套件的根目錄。如果您正在測試應用程式,它也必須相依於 build_test

若要相依於這些套件,請將下列 dev_dependencies 新增至您的應用程式的 pubspec.yaml 檔案

yaml
  dev_dependencies:
    # ···
    build_runner: ^2.4.8
    build_test: ^2.2.2
    build_web_compilers: ^4.0.9

如同往常在 pubspec.yaml 變更後,執行 dart pub getdart pub upgrade

$ dart pub get

使用 Dart 套件中的指令碼進行編譯和測試

#

此工具可以使用兩種方式編譯:一種讓除錯更容易 (serve),另一種產生小而快速的程式碼 (build)。

開發編譯器支援增量更新,並產生 非同步模組定義 (AMD) 模組。使用 webdev serve,您可以編輯您的 Dart 檔案,在 Chrome 中重新整理,並在短時間內看到您的編輯。此速度來自於編譯已更新的模組,而不是您的應用程式所需的所有套件。

第一次編譯會花費最長的時間,因為它會編譯整個應用程式。當 serve 指令執行時,後續的建置應會編譯得更快。

生產編譯器會產生單一、已縮小的 JavaScript 檔案。

此區段說明如何使用下列指令

webdev serve
執行持續建置 JavaScript 應用程式的開發伺服器。
webdev build
建置 JavaScript 應用程式的可部署版本。
build_runner 測試
執行測試。

您可以使用建置組態檔案自訂您的建置。若要進一步了解建置組態檔案,請參閱 build_web_compilers 套件。

webdev serve

#

若要提供您的網頁應用程式的開發版本,請執行下列指令。

$ 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

#

使用下列指令來建置你的應用程式

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

預設情況下,build 指令會使用生產 JavaScript 編譯器來建立應用程式的生產版本。加入 --no-release 以使用開發 JavaScript 編譯器進行編譯。使用 --output 選項來控制 Dart 編譯頂層專案資料夾並寫入其輸出的位置。

下列指令顯示如何將專案的頂層 web 資料夾編譯到 build 目錄。此指令預設會使用生產 JavaScript 編譯器。

$ webdev build --output web:build

build_runner 測試

#

使用 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 套件

另請參閱下列頁面