Ionic 3 升級 Ionic 4 遷移指南

時間 2019-11-06

標籤 ionic 升級遷移指南简体版

原文原文鏈接

Ionic 3 升級 Ionic 4 遷移指南

前言

Ionic 4 包含現代 Web API，如Custom Elements，CSS Variables和Shadow DOM。它徹底與開發框架無關，做爲 Web 開發人員的UI庫，不管他們決定使用什麼前端工具或代碼框架。css

在Vue，React或根本沒有框架中使用Ionic也是如此。就像Ionic Angular同樣，咱們的目標是使用傳統標準在最流行的框架中輕鬆採用Ionic。使用Vue開發Ionic應用參考這裏html

Ionic Framework 4使用標準 Web API 從頭開始重建，每一個組件都打包爲符合標準的 Web 組件。經過單獨依賴瀏覽器 API 支持並保持每一個組件的公共 API 穩定，這使框架的核心保持友好。前端

與此相反，依賴於特定框架的客戶端運行時和組件模型，這些模型可能會隨着時間的推移而發生變化（須要進行代價高昂的重寫和API更改）。 Ionic 4的目的是爲了不可怕的「框架流失」，所以咱們能夠花更多的時間專一於咱們最擅長的事情：爲Web開發人員建立出色的UI組件。簡而言之，咱們永遠不想再次重寫Ionic的組件。vue

v4中最大的變化之一是Ionic爲每一個組件使用Web組件。咱們甚至構建了一個名爲Stencil的工具來幫助咱們更輕鬆地完成這項工做並開源！git

除了避免框架流失外，Web Components還將更多工做推向瀏覽器並須要更少的代碼，從而爲負載和啓動時間帶來關鍵性能改進，這對於構建高性能Progressive Web Apps相當重要，這是項目向前發展的重點。github

對於那些剛接觸Web Components的人來講，該術語指的是一系列Web API，它們在現代移動和桌面瀏覽器上獲得普遍支持，例如Custom Elements和Shadow DOM。雖然Web Components已經被炒做了幾年，但咱們認爲瀏覽器和開發人員的支持終於達到了臨界質量，使它們爲黃金時段作好了準備。但咱們並非惟一的 - 許多傳統框架和UI庫也開始採用它們（例如：Angular Elements）。typescript

因爲您可能已經對瀏覽器支持感到疑惑：Ionic無縫地填充了極少數自己不支持Web組件的瀏覽器。相當重要的是，polyfill只會根據功能檢測下載到須要它們的客戶端，所以絕大多數用戶甚至不須要請求其中任何一個。使人驚訝的是，移動設備對Web組件API提供了更普遍的支持，使得polyfill更加沒必要要。shell

當Ionic 2發佈時，Angular CLI，構建工具和 Router 出現了大量的流失性和不肯定性。所以，Ionic必須構建本身的許多工具版本。快進到今天，Angular經過一些出色的工具填補了這些空白，如今是Ionic利用它，並遵循Angular社區中設定的標準的時候了。bootstrap

從Ionic 4開始，咱們很高興徹底接受Angular CLI和 Router ！這些更新容許咱們用官方的，維護良好的Angular工具替換ionic-app-scripts和Ionic的 Router 。api

這意味着Angular開發人員如今能夠直接將Angular CLI用於Ionic應用程序，並隨時瞭解Angular繼續取得的使人敬畏的進展。咱們還想確保Ionic Angular爲Framework使用了defacto標準 Router ，所以Angular開發人員能夠再次使用他們熟悉的API。咱們將可以更深刻地瞭解咱們的文檔和即將發佈的博客文章。

雖然這對現有的Ionic Angular開發人員來講是一個改變，可是對於該項目來講這是一個長期的勝利，由於Ionic能夠更多地關注組件，而不是更多的沒必要要的複雜工具，以及Ionic Angular開發人員的勝利，如今可使用一流的Angular工具和慣例。

概述

將現有應用程序從 Ionic 3 遷移到 4 時，建議參照如下過程：

使用 blank 啓動器生成一個新項目(參考建立應用)。
從 src/providers 複製全部 Angular services到 src/app/services。
- Services 應該包括 @Injectable() 裝飾器中的 { providedIn: 'root' } 。更多詳情, 請參考 Angular provider docs.
複製應用程序的其餘根級別項目 (例如, pipes, components 等) 並保持目錄結構從 src/components 變動爲 src/app/components.
從 src/app/app.scss 複製全局 Sass 樣式到 src/global.scss
複製應用程序的其他部分, page 到 page 或者 feature 到 feature, 注意如下幾點:
- 默認狀況下，Emulated Shadow DOM處於啓用狀態
- Page/component 的 Sass 不該再包含在 page/component 標記中，而應使用 Angular @Component 裝飾器的 styleUrls 選項
- RxJS 已從 v5 更新爲 v6 (參考 RxJS變動)
- 某些生命週期 hooks 應該被 Angular 的 hooks 取代 (參考生命週期事件)
- 可能須要更改某些標記 (有遷移工具可用, 參考標記變動)

在許多狀況下，使用 Ionic CLI 生成新對象而後複製代碼也能夠很好地工做。例如：ionic g service weather 將建立一個 Weather 服務和測試 shell。而後能夠根據須要對舊代碼中的代碼進行微小修改。這有助於確保遵循正確的結構。這也會爲單元測試生成 shell。

項目結構

Ionic 3 應用程序和 Ionic 4 應用程序之間的主要變化之一是項目總體的佈局和結構。在第3版中，Ionic 應用程序有一個自定義約定，用於如何設置應用程序以及該文件夾結構應該是什麼樣子。在 v4 中，已更改成遵循每一個受支持框架的建議的設置。

例如，若是某個應用程序正在使用 Angular，那麼該項目結構將與 Angular CLI 應用程序徹底相同。這種變化雖然須要一點適應過程，但有助於保持常見模式和文檔的一致性。

上面的比較是 v4 應用程序項目結構的一個示例。對於有 Angular 項目經驗的開發人員來講，這應該讓人感到很是熟悉。

有一個 src/ 目錄做爲應用程序的主頁。這包括 index.html，全部資產，環境變量和任何特定於應用程序的配置文件。

在遷移應用程序以利用此新佈局時，建議使用 CLI 建立新 "base" 項目。而後，使用新項目佈局，逐個遷移應用程序的功能。Pages/components/等，應該移到 src/app/ 文件夾中。

包名變動

V4 版本的另外一個變化是 Ionic 的實際包名。對於 v4，包名稱現爲 @ionic/angular。遷移應用程序時，將 imports 從 ionic-angular 更新爲 @ionic/angular。

RxJS變動

因爲從 RxJS v5 更改成 v6，所以須要進行一些次要的 RxJS 更改。有關詳細信息，請參閱 RxJS 遷移指南。

生命週期事件

一些 Ionic 生命週期事件等同於 Angular 生命週期 hooks。例如，ionViewDidLoad() 扮演與 Angular OnInit 生命週期 hook（ngOnInit()）相同的角色。在這種狀況下，請使用 Angular 生命週期 hooks。

疊加組件

在 ionic 的早期版本中，同步建立了諸如 Loading，Toast 或 Alert 之類的疊加組件。在 Ionic v4 中，這些組件都是異步建立的。所以，API 如今基於 promise。

// v3
showAlert() {
  const alert = this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  });

  alert.present();
}

In v4, promises are used:

showAlert() {
  this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  }).then(alert => alert.present());
}

// 或使用 async/await

async showAlert() {
  const alert = await this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  });

  await alert.present();
}

延遲加載

另外一個變化是在 v4 應用程序中如何進行延遲加載。

在v3中，延遲加載是這樣完成的：

// home.page.ts
@IonicPage({
  segment: 'home'
})
@Component({ ... })
export class HomePage {}

// home.module.ts
@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage)]
})
export class HomePageModule {}

可是，在 v4 中，延遲加載是經過 Angular Router 的 loadChildren 方法完成的：

// home.module.ts
@NgModule({
  imports: [
    IonicModule,
    RouterModule.forChild([{ path: '', component: HomePage }])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    RouterModule.forRoot([
      { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
      { path: '', redirectTo: 'home', pathMatch: 'full' }
    ])
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}