想標(biāo)題真是一件很麻煩的事，所以就借用<權(quán)利的游戲>的經(jīng)典臺(tái)詞:Winter Is Coming。最近看了看ionic4的相關(guān)文檔，初步總結(jié)一下。
Ionic Components
Ionic4 使用stencil來(lái)構(gòu)建webComponet，對(duì)于webComponet而言，是沒(méi)有雙向綁定這些的，所以為了適配Angular，在這些webComponet上面做了一層封裝。Angular用戶而言只用使用@ionic/angular就可以了。
組件的API層面變化挺大，具體可看BREAKING。有大量的屬性重命名，感覺(jué)以后項(xiàng)目升級(jí)改動(dòng)不小，至少<ion-nav>的去除，就要修改很多頁(yè)面。
路由
ionic4中推薦使用Angular Router，并且實(shí)現(xiàn)了自己的`<ion-router-outlet>。
對(duì)于lazylaod而言,@IonicPage的方式將會(huì)廢棄。
不過(guò)這種方式固有的缺陷就是狀態(tài)保存，對(duì)于移動(dòng)App而言，返回上一頁(yè)除了需要保存數(shù)據(jù)之外，頁(yè)面的滾動(dòng)狀態(tài)也是需要保存的。
ionic3中基于stack的方式，本質(zhì)上是z-index的增加。頁(yè)面的dom結(jié)構(gòu)并不會(huì)刪除，所以返回上一頁(yè)時(shí)和之前完全一樣。
Angular的路由是會(huì)刪除dom的，最多也只是數(shù)據(jù)的保存。不知道官方說(shuō)推薦使用Angular Router是處于什么原因，看來(lái)一下ionic4的源碼，也沒(méi)有發(fā)現(xiàn)什么特別的處理。
不過(guò)，ionic4還是支持stack的方式的。
Ionic Native cordova capacitor
Ionic Native 會(huì)支持cordova capacitor。
Ionic Native 與 cordova plugin 版本之間對(duì)應(yīng)的管理。比如Ionic Native的keyboard的哪些版本對(duì)于cordva plugin的哪些版本，個(gè)人感覺(jué)其實(shí)挺混亂的，需要自己去辨別吧。
capacitor雖說(shuō)可以使用cordova，但是不支持參數(shù)，需要自己在代碼中去寫(xiě)。關(guān)注點(diǎn)就不僅僅是web端了，需要hook去修改生成的原生項(xiàng)目，或者原生源碼加入版本管理。
還是很希望capacitor能解決一些原生的問(wèn)題的，比如keyboard的一些問(wèn)題。
Ionic Cli VS Angular Cli
個(gè)人推薦使用 Angular cli。目前做的項(xiàng)目大概有300個(gè) component。之前--prod打包經(jīng)常內(nèi)存溢出。后來(lái)?yè)Q了一臺(tái)16G內(nèi)存的電腦，打包時(shí)間大概有40分鐘，主要是webpack編譯階段很慢。
ionic cli的功能基本等于 angular cli + cordova cli + ionic pro(收費(fèi)) 的封裝，對(duì)于我們而言，完全沒(méi)有必要使用ionic cli。直接使用 angular cli + cordova cli，在Angular cli生成的項(xiàng)目中新建cordova文件夾，里面初始化一個(gè)cordova項(xiàng)目，只需要把Angular生成的項(xiàng)目Copy進(jìn)去，寫(xiě)一些腳本自動(dòng)化就可以了。
默認(rèn)ionic cli 生成的項(xiàng)目，css處理，使用selector來(lái)隔離樣式的，并且是單獨(dú)打包的。既然使用了angular，我們完全可以使用angular的style encapsulation。
使用Angular cli的一個(gè)好處就是可以直接使用environments。而Ionic CLI 則要做很多，具體可看ionic3 中使用 environments。
之前測(cè)試打包問(wèn)題。發(fā)現(xiàn)在ionic cli上--prod能通過(guò)的，在Angular Cli上卻不能，個(gè)人還是相信Angular官方推薦的工具吧
總之web的東西就交給Angular，我們只是使用ionic提供的組件庫(kù)。
運(yùn)行官方源碼的Angular Demo
git clone https://github.com/ionic-team/ionic.git
// 生成 @ionic/angular
cd angular
npm install
npm run build
// 運(yùn)行demo
cd test/nav
npm install
npm run copy-ionic-angular
npm run serve
