Ionic2系列-將beta升級到RC1

國慶節前Ionic2發佈了RC0版本，已經接近正式版了，前不久Angular2和TypeScript2也已經發布了正式版。詳情請參考官方博客：

http://blog.ionic.io/announcing-the-ionic-2-release-candidate/

此次升級提升了必定的性能，引進了Angular2的一些新特性，如@NgModule、支持AoT編譯（Ahead of Time）等，項目結構也發生了變化。因此須要花一點時間把beta版本的項目升級到RC0，相對於提高的性能來說，仍是很值得的。

AoT能夠在build階段預先編譯模板，啓動速度和頁面切換速度都會提升。官方提供了一個beta11和RC0的對比效果圖：

能夠看到，啓用AoT的RC0版本啓動速度大大提高，首頁加載速度比beta11版本快不少。

除此以外，RC0的build方式也改變了。RC0拋棄了webpack，使用了Rollup。不用再安裝Gulp來管理任務了，用npm scrip來打包。可是對開發者使用來講並無什麼變化，仍是使用Ionic serve命令便可，只是輸出的內容有所變化。採用這種build方式後，自定義打包腳本也變得很容易配置了。可參考Github項目地址：https://github.com/driftyco/ionic-app-scripts。

 

項目結構的變化主要體如今引入了@NgModule，源代碼從app目錄移到了src目錄，pages、providers這些目錄都沒有變化。

 

對於從beta版本一直跟下來的開發者來講，可能都遇到過API在不一樣版本中用法不一樣的狀況，有的還變來變去，如Alert等組件的用法，顯示一個Alert有的版本要調用Alert的方法有的版本要調用AlertController的方法。RC0也穩定了API用法，應該不會有大的變更了。

 

在編譯模式方面，beta版本之前要本身啓用Angular2的生產模式，RC0就簡單不少，項目模板已經提供了dev模式和prod模式，使用ionic serve命令調試的時候是dev模式，當使用build命令時會自動切換到prod模式，很是方便。prod模式編譯出來的js文件體積大大減小，啓動速度也快了不少。

 

其餘還有一些變更，如：

一、從新命名了生命週期事件名稱：

　　ionViewLoaded事件改成ionViewDidLoad

　　移除了IonViewDidUnload事件

　　從ViewController中移除了fireOtherLifecycles事件

二、將Storage從ionic-angular中轉移到了一個單獨的module——ionic-storage中，若是用到了該組件須要修改package.json而後npm install。

三、修改了color的用法：

　　不能直接給一個組件添加color了，必需要改爲屬性的方式，之前能夠這樣用：

　　<ion-tabs primary>

　　如今要改爲這樣：

　　<ion-tabs color="primary">

　　受影響的組件有：

• Badge
• Button
• Checkbox
• Chip
• FAB
• Icon
• Item (Item, Item Divider, List Header)
• Label
• Navbar
• Radio
• Searchbar
• Segment
• Spinner
• Tabs
• Toggle
• Toolbar
• Typography (headers, paragraphs, spans, etc.)

四、修改了button組件的聲明方式，<button>要改爲<button ion-button>，<a button>改爲<a ion-button>;Icon Button的聲明方式也有所變化。

五、CSS引入方式也變化了。之前要分別引入三個平臺的css，由ionic動態加載，如今只須要如下一行就能夠了：

　　<link href="build/main.css" rel="stylesheet">

……

我以爲RC0已經能夠進行實際應用了，這幾天把手頭的一個項目升級到了RC0。可是就在我寫這篇blog的時候，剛發現10.13也就是昨天Ionic2發佈了RC1，其中修復了Modal組件沒法觸發ionViewDidLoad事件的bug，這個bug我曾經遇到過。看來離正式版很近了。固然RC0到RC1比較簡單，主要是beta11到RC改動較大。升級步驟以下：

 

根據官方說明，有兩種升級方式，一種是新建一個新項目，將beta版本的代碼拷過去；一種是直接在beta項目基礎上改。推薦第一種方式，由於RC的項目結構變化比較大，最好仍是新建一個來改。

 

1. 首先確認npm版本是3.x以上，使用npm -v命令來查看一下：

2. 安裝最新的Ionic CLI。若是以前裝的是beta版，必須使用npm uninstall -g ionic卸載掉，再從新使用npm install -g ionic安裝。安裝後使用ionic -v看一下版本，應該是2.1以上：
   
3. 新建一個Ionic RC版本的app
   ionic start –v2 myApp
4. 將beta項目的pages目錄從app/pages複製到新項目的src/pages；providers目錄從app/providers複製到src/providers；pipes目錄從app/pipes複製到src/pipes；components目錄也同樣複製到src/components。
5. 全部組件的templateUrl，把build……那一串去掉，只留文件名，如build/pages/about/about.html改成about.html。
6. 修改src/app/app.module.ts文件，Import全部的pages，並添加到declaration數組和entryComponents數組中。
7. Import全部的components和pipes並添加到declaration數組中。
8. Import全部的providers並添加到providers數組中。
9. 修改全部的Component，移除providers、pipes和directives。之前若是在Component中不聲明這些東西是無法用的，如今不用了，都在app.module.ts裏聲明瞭。
10. 把模板中全部用到的變量的關鍵字由private改成public。這個改動主要是爲了AoT編譯，若是聲明爲private的變量，AoT是沒法訪問的。
11. 修改全部的<button>標籤，改成<button ion-button>.
12. 修改全部用到color屬性的地方，如<button primary>須要改成<button ion-button color="primary">。
13. 把全部的ionic config轉移到app.module.ts裏的IonicModule.forRoot裏。如IonicModule.forRoot(MyApp,{configObject})。
14. 把sass文件中針對不一樣平臺的變量轉移到theme/variables.scss文件中。
15. 爲每一個要添加自定義樣式的Component添加一個selector，爲了讓樣式有一個做用域。這樣每一個單獨的Component均可以有本身的樣式做用域，意義更清晰。如樣式表中這樣寫：
    page-about {
    #title {
    color: blue;
    }
    }
    Component中這樣寫：
    @Component({
    selector: 'page-about',
    templateUrl: 'about.html'
    })
    這樣的話這個樣式只會在該Component內起做用。
16. 若是有img目錄，須要轉移到src/assets/img裏，相應的修改一下圖片 路徑。

這樣就基本完成了從beta升級到RC的過程。

常見問題：

build到Android的過程當中，報錯：

Unsupported major.minor version 52.0

這是由於Ionic2RC不支持JDK1.7 版本了，須要升級到JDK1.8才能正常編譯。

整體來講升級到RC仍是很值得的。使用ionic serve命令時，Angular是dev模式：

當使用ionic build android命令時，能夠看到改成了prod即生產模式：

這樣編譯後的啓動速度大大提升。

以上的內容主要參考了官方的升級文檔，把主要的內容翻譯了一下。若是你們有任何升級方面的問題歡迎留言討論。

官方升級說明地址：https://github.com/driftyco/ionic/blob/master/CHANGELOG.md