2.1　Ionic快速上手環(huán)境安裝

Ionic開發(fā)調(diào)試環(huán)境是基于Node.js運行的，而Ionic的公開源代碼包又托管在Github上。因此安裝Ionic正式開發(fā)調(diào)試環(huán)境前，需要有一些前置的平臺工具先能成功運行。本節(jié)將依次介紹這些平臺工具的安裝和對它們的功能進行簡單說明。

2.1.1　安裝Node.js和NPM

1．什么是Node.js和NPM

Node.js是讓JavaScript脫離瀏覽器運行在服務器的一個平臺，而不是一個新的語言或者庫。雖然Node.js采用的是單線程機制，但是它通過異步IO與事件驅(qū)動的設計來實現(xiàn)了高并發(fā)服務。此外Node.js內(nèi)建一個HTTP服務器可方便地用于測試和生產(chǎn)運行。在App應用開發(fā)的過程中，我們將要在瀏覽器中調(diào)試的Ionic代碼就是通過Node.js的HTTP服務來響應請求和執(zhí)行文件修改后動態(tài)reload（重新加載）機制，因此能夠運行Node.js是成功安裝Ionic的前提條件。

NPM是Node.js的包管理器，它已經(jīng)被自動包含在目前Node.js的安裝包里，不再需要單獨安裝。在使用Ionic的CLI生成完Ionic工程目錄和描述工程所用到的Node.js代碼包的配置文件package.json之后，NPM會被自動調(diào)用以下載安裝這些Node.js代碼包。

2．安裝Node.js和NPM

筆者編寫本書時，可以成功安裝運行Ionic的Node.js版本為v8.9.0，因此建議讀者可以在開發(fā)機的命令行內(nèi)輸入：

     node –v

判斷是否已經(jīng)安裝了正確的Node.js和NPM版本，如圖2.1所示。

圖2.1　查看當前操作系統(tǒng)安裝的Node.js、NPM版本

如果Node.js未安裝或者版本太舊需要升級，建議讀者到圖2.2中顯示的Node.js中文網(wǎng)http://nodejs.cn/download/，根據(jù)所使用的操作系統(tǒng)選擇對應的Node.js包安裝。

圖2.2　Node.js的官網(wǎng)下載選擇安裝包

由于中國國情的關系，使用NPM下載安裝某些軟件包時需要使用一些不可詳細描述的技術手段改變聯(lián)網(wǎng)狀態(tài)。因此推薦讀者在安裝或升級完Node.js后運行以下命令安裝淘寶提供的NPM軟件包庫的鏡像CNPM，安裝命令的成功輸出如圖2.3所示。

     npm install-g cnpm--registry=https://registry.npm.taobao.org

圖2.3　使用NPM安裝CNPM

命令成功執(zhí)行完畢后，以后使用NPM命令的地方就都可以用CNPM來代替了。有一些讀者可能會選擇不安裝CNPM，所以接下來文中的內(nèi)容依然使用NPM命令，安裝了CNPM的讀者可以自行替換。

到目前為止，Node.js和NPM的安裝就算基本完成了，讀者可以回顧一下圖2.1，運行圖中的3個命令檢查一下開發(fā)機的軟件版本是否正確（版本號大于等于圖中數(shù)字即可）。

2.1.2　安裝Git

Git是目前世界上最先進的分布式版本控制系統(tǒng)。和Git出現(xiàn)前流行的集中式的版本控制系統(tǒng)CVS、SVN及收費版的ClearCase相比，Git所代表的分布式版本控制系統(tǒng)為開發(fā)者帶來了極大的便利，同時丟失代碼的可能性也減小很多。目前基本所有的開源項目都發(fā)布在使用Git的Github網(wǎng)站上，Ionic開發(fā)框架這個開源項目也是如此（項目在Github的網(wǎng)址為https://github.com/ionic-team/ionic）。

因此使用Ionic框架的開發(fā)者，需要在開發(fā)機安裝好Git。這樣當使用Ionic CLI創(chuàng)建項目時，將會自動調(diào)用Git的命令，從Github把最新的Ionic模板與支持文件下拉到本地目錄。

1．Windows操作系統(tǒng)環(huán)境下Git的安裝

筆者推薦使用Windows操作系統(tǒng)環(huán)境的讀者到圖2.4展示的Git開發(fā)組提供的專門網(wǎng)站https://git-scm.com/download/win自動下載最新版的Git安裝包并按提示安裝即可。

圖2.4　Git的官網(wǎng)下載網(wǎng)站

2．Mac OS操作系統(tǒng)環(huán)境下Git的安裝

筆者推薦使用Mac OS操作系統(tǒng)環(huán)境的讀者使用Homebrew來安裝Git。首先讀者可以在Terminal窗口輸入：

     brew

通過Terminal窗口的提示可知Homebrew是否已被安裝。如果Homebrew尚未安裝，讀者需到Homebrew的官方網(wǎng)站（https://brew.sh/index_zh-cn.html）依據(jù)說明安裝，如圖2.5所示。因為官網(wǎng)已提供中文版的完整說明和命令代碼，這里不再詳述Homebrew的安裝過程。

圖2.5　Homebrew官網(wǎng)安裝說明

確認Homebrew可以正常工作后，安裝Git就很簡單了。繼續(xù)在Terminal窗口輸入：

     brew install git

即可進入Git的安裝。安裝完畢后可輸入：

     git-–version

驗證Git是否成功安裝以及被安裝的版本，如圖2.6所示。

圖2.6　驗證Git是否成功安裝以及被安裝的版本

2.1.3　安裝Gulp和Bower

Gulp是前端開發(fā)過程中一種基于流的代碼構建工具，是自動化項目的構建利器。她不僅能對網(wǎng)站資源進行優(yōu)化，而且在開發(fā)過程中很多重復的任務能夠使用正確的工具自動完成。具體來說，Gulp是基于Node.js的自動任務運行器，它能自動化地完成JavaScript、SASS/SCSS、HTML、CSS等文件的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復指定這些步驟。在實現(xiàn)上，它借鑒了UNIX操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。

Bower是用于Web前端開發(fā)的Node.js包依賴管理器。對于前端包管理方面的問題，它提供了一套通用、客觀的解決方案。它通過一個API暴露包之間的依賴模型，這樣更利于使用更合適的構建工具。Bower沒有系統(tǒng)級的依賴，在不同包之間也不互相依賴，依賴樹是扁平的。

Ionic框架同時使用了Gulp和Bower作為安裝與構建工具鏈的一部分，因此這兩個工具都需要在命令行工具中使用NPM安裝好：

     npm-g install bower gulp

安裝過程完成后分別輸入以下兩條命令驗證Gulp和Bower的正常安裝與版本，如圖2.7所示。

     bower--version
     gulp--version

圖2.7　驗證Gulp和Bower是否成功安裝以及被安裝的版本

如果電腦缺少Python環(huán)境，會導致npminstall命令失敗。Python官方網(wǎng)站https://www.python.org，文中的下載地址https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi，Python環(huán)境配置完成后重新執(zhí)行NPM的安裝指令即可。

下載好安裝包后，選擇安裝路徑進行安裝即可。最后我們需要配置一下Python的環(huán)境，如圖2.8所示。

     path=%path%;c:\Python27
     python--version

圖2.8　Python命令行配置環(huán)境和驗證安裝的版本

如果配置后仍然沒有生效，可以選擇手動配置。右擊我的電腦，選擇屬性，選擇高級系統(tǒng)設置進行配置，如圖2.9所示。

圖2.9　Python手動配置環(huán)境

Mac用戶則使用Homebrew安裝即可。

     brew install python

2.1.4　安裝Ionic CLI與Cordova

完成了前面的鋪墊之后，現(xiàn)在可以開始安裝Cordova和Ionic CLI了。首先需要在命令行工具中使用NPM安裝這兩個工具包：

     npminstall-gcordova@7.0.1 ionic@3.18.0

由于中國互聯(lián)網(wǎng)的特殊狀況，使用NPM安裝Cordova和Ionic CLI的過程中可能會出現(xiàn)一些依賴包無法下載而安裝失敗的現(xiàn)象。不幸中招的讀者可以使用CNPM替換命令中的NPM，嘗試使用本章2.1.1節(jié)介紹的淘寶提供的NPM軟件包庫的鏡像繞過此類問題。

安裝過程完成后分別輸入以下兩條命令驗證Cordova和Ionic CLI的正常安裝與版本，如圖2.10所示。

     cordova-v
     ionic-v

圖2.10　驗證Cordova和Ionic CLI是否成功安裝以及被安裝的版本

直接在命令行工具中運行Ionic命令即會出現(xiàn)Ionic的任務提示界面：

     ionic

圖2.11中顯示了Ionic CLI支持的子命令集和對應的說明。

圖2.11　Ionic的任務提示界面

2.1.5　安裝設置Chrome瀏覽器（推薦）

在運行Ionic CLI創(chuàng)建一個項目之前，筆者推薦先安裝好Google Chrome瀏覽器，并將其設為系統(tǒng)的默認瀏覽器。該瀏覽器的內(nèi)置開發(fā)者工具非常強大，而且在調(diào)試實體Android設備的Webview應用時可以連接其控制臺（console），獲取實時的調(diào)試信息。建議讀者到其中文版官方網(wǎng)站下載，如圖2.12所示，安裝地址為http://www.google.cn/chrome/browser/desktop/index.html。如果因網(wǎng)絡問題無法連接官方網(wǎng)站，再考慮到國內(nèi)的軟件下載網(wǎng)站去找，這里筆者就不一一指出了。

圖2.12　Google Chrome瀏覽器官方網(wǎng)站下載

完成Google Chrome瀏覽器安裝后，Windows和Mac OS操作系統(tǒng)的用戶分別按F12鍵/command+option+I鍵，打開Chrome的開發(fā)者工具，將各窗口布局調(diào)整成如圖2.13中所示的模式。這種布局模式的好處是左邊顯示了App應用的模擬顯示界面。當開發(fā)人員在右方窗口對HTML/CSS/JavaScript代碼做出任何調(diào)整的時候，左邊的頁面渲染將會即時反映出代碼的效果；而當開發(fā)人員操作左方的界面元素產(chǎn)生動畫等效果時，也可以實時看到右方代碼窗口里的CSS類被動態(tài)改變。這種布局模式能充分利用寬屏顯示器的優(yōu)勢，推薦讀者采納。

圖2.13　建議的Chrome調(diào)試模式窗口布局

對調(diào)整不太熟悉的讀者可以參考點擊圖2.14中注釋出來的按鈕，這樣就能比較容易獲得圖2.13的效果。

圖2.14　Chrome調(diào)試模式布局調(diào)整按鈕

2.1.6　Hello Ionic項目

現(xiàn)在終于可以創(chuàng)建一個Ionic的測試樣例項目來感覺一下了。在命令行輸入：

     ionic start HelloIonic blank

Ionic的CLI會開始使用Git從Github網(wǎng)站上抓取正式版的Ionic框架源代碼，經(jīng)過一段時間的等待（等待時間跟網(wǎng)絡環(huán)境有關），會顯示如圖2.15所示的界面，之后等待npminstall命令完成即可。安裝對iOS和Android移動操作系統(tǒng)平臺的支持，我們會在本章的后續(xù)內(nèi)容里逐一介紹。

圖2.15　IonicCLI完成初始化項目框架提示界面

按照圖2.16的提示，進入項目目錄后在命令行窗口中輸入：

     ionic serve

Ionic CLI將開始Web構建過程，進入命令狀態(tài)，并啟動默認的瀏覽器打開App應用，如圖2.16所示。

圖2.16　Ionic CLI命令狀態(tài)

2.1.7　使用瀏覽器驗證開發(fā)環(huán)境自動重載特性

Ionic框架為瀏覽器環(huán)境開啟變更自動重載。開發(fā)者更改了項目代碼并保存后，瀏覽器會自動刷新反映變化。圖2.17是初始頁面的內(nèi)容，注意頂欄標題為“Ionic Blank”。

圖2.17　頁面初始顯示

隨后讀者可以嘗試使用文本編輯器打開項目目錄中www字母下的index.html文件，找到“Ionic Blank”文本字樣后將其改為“Hello Ionic”并保存文件。無須手動刷新，瀏覽器就會自動刷新頁面，如圖2.18所示，注意頂欄標題已變?yōu)椤癏ello Ionic”。

圖2.18　頁面重新加載后頂欄標題顯示的文本更新