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