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。

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

yaml  dev_dependencies:
    # ···
    build_runner: ^2.4.13
    build_test: ^2.2.2
    build_web_compilers: ^4.0.11

如同往常，在 pubspec.yaml 變更後，執行 dart pub get 或 dart pub upgrade

$ dart pub get

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

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

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

生產編譯器產生單一、精簡化的 JavaScript 檔案。

本節說明如何使用下列指令

您可以使用建置設定檔來自訂您的建置。若要深入瞭解建置設定檔，請參閱 build_web_compilers 套件。

若要伺服開發版本的網頁應用程式，請執行下列指令。

$ 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

您可以指定不同的目錄-port 設定。

例如，下列指令將測試 port 從預設值 (8081) 變更為 8083

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

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

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

依預設，build 指令使用生產 JavaScript 編譯器來建立您應用程式的生產版本。新增 --no-release 以使用開發 JavaScript 編譯器進行編譯。使用 --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 套件。

另請參閱下列頁面

除非另有說明，否則本網站上的文件反映 Dart 3.7.1 版本。頁面最後更新於 2024-12-11。查看原始碼或回報問題。

設定