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

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

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

檢出 pubspec.yaml

右擊打開(kāi) pubspec.yaml。單擊編輯窗口底部的 Source 標(biāo)簽。

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

關(guān)鍵信息

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

查看包目錄

在 Dart 編輯器中，展開(kāi) 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 編輯器自動(dòng)安裝的。
• browser 包包含了檢查本地 Dart 支持的 dart.js 腳本。
• 為了能讓?xiě)?yīng)用成功部署，這些包必須包含在構(gòu)建的應(yīng)用中。

運(yùn)行 Pub 構(gòu)建

選擇 pubspec.yaml，然后選擇 *Tools > Pub Build - Minified，將會(huì)構(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)建了一個(gè) build 目錄
• 你可以選擇 Pub Build - Minified 或者 Pub Build - Debug。 當(dāng)構(gòu)建一個(gè)最精簡(jiǎn)的 JavaScript 時(shí)，所有空格和無(wú)關(guān)的字符都會(huì)被移動(dòng)，創(chuàng)建一個(gè)更緊湊的文件，但它的可讀性更低。
• build 目錄包含了部署項(xiàng)目所需要的一切東西。

查看 build 目錄

在你工作的 1-blankbadge 目錄下，展開(kāi) build 目錄，然后展開(kāi) 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 單獨(dú)部署所需的所有文件。
• piratebadge.dart.js 是一個(gè)精簡(jiǎn)的 JavaScript 文件。 當(dāng)部署時(shí)，這個(gè)文件會(huì)運(yùn)行在瀏覽器中。

運(yùn)行 App

關(guān)鍵信息

• App 運(yùn)行在本機(jī)上。如果你想共享給他人，你需要將你的 App 部署到主機(jī)上。