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

您可以指定不同的目錄-連接埠組態。

例如，以下命令會將測試連接埠從預設 (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.6.0。頁面最後更新時間為 2024-12-11。檢視原始碼或回報問題。

設定