步驟 7：構(gòu)建并運行 App

在這步中，你將使用 pub build 來生成 App 的資源并將他們放入一個名為 build 的新目錄中。除了其它任務(wù)之外，構(gòu)建過程中還會生成最精簡的 JavaScript 代碼，這些代碼可以在現(xiàn)在任何主流的瀏覽器中運行。

需要注意的是 one-hour-codelab 目錄包含幾個目錄，分別對應(yīng)每個步驟，他們都被當做 one-hour-codelab 應(yīng)用的一部分。構(gòu)建過程為每個目錄生成了資源。每個目錄都可以被單獨部署。

檢出 pubspec.yaml

右擊打開 pubspec.yaml。單擊編輯窗口底部的 Source 標簽。

name: avast_ye_pirates
description: Write a Dart web app code lab
dependencies:
  browser: any

關(guān)鍵信息

• 目錄中的 pubspec.yaml 文件標識了這個目錄和其中的內(nèi)容是一個應(yīng)用。
• pubspec.yaml 提供了應(yīng)用的元信息，例如它的名字。
• pubspec.yaml 同時也列出了應(yīng)用所依賴的庫。 這個 App 需要的 browser 庫被托管在了 pub.dartlang.org 上面，同時還托管了許多其它的庫。
• any 代表選擇符合你SDK的最新的軟件包。

查看包目錄

在 Dart 編輯器中，展開 1-blankbadge 下的 packages 目錄。

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/learn-dart-in-minutes-build-and-run-pic1.png" alt="pic1" />

關(guān)鍵信息

• packages 目錄包含了 pubspec.yaml 文件中列出的所有依賴的代碼。他們是 Dart 編輯器自動安裝的。
• browser 包包含了檢查本地 Dart 支持的 dart.js 腳本。
• 為了能讓應(yīng)用成功部署，這些包必須包含在構(gòu)建的應(yīng)用中。

運行 Pub 構(gòu)建

選擇 pubspec.yaml，然后選擇 *Tools > Pub Build - Minified，將會構(gòu)建 one-hour-codelab* 目錄下的所有東西。輸入內(nèi)容類似如下：

Loading source assets...
Building avast_ye_pirates...
[Info from Dart2JS]:
Compiling avast_ye_pirates|web/piratebadge.dart...
[Info from Dart2JS]:
Took 0:00:08.671410 to compile avast_ye_pirates|web/piratebadge.dart.
Built 6 files to "build".

關(guān)鍵信息

• pub build 命令創(chuàng)建了一個 build 目錄
• 你可以選擇 Pub Build - Minified 或者 Pub Build - Debug。 當構(gòu)建一個最精簡的 JavaScript 時，所有空格和無關(guān)的字符都會被移動，創(chuàng)建一個更緊湊的文件，但它的可讀性更低。
• build 目錄包含了部署項目所需要的一切東西。

查看 build 目錄

在你工作的 1-blankbadge 目錄下，展開 build 目錄，然后展開 web 目錄。

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/learn-dart-in-minutes-build-and-run-pic2.png" alt="pic2" />

關(guān)鍵信息

• build/web 包含了 App 單獨部署所需的所有文件。
• piratebadge.dart.js 是一個精簡的 JavaScript 文件。 當部署時，這個文件會運行在瀏覽器中。

運行 App

關(guān)鍵信息

• App 運行在本機上。如果你想共享給他人，你需要將你的 App 部署到主機上。