CK's Notepad

[Angular] 如何從 RxJS 5.x 升級至 RxJS 6?

發表於 分類於 Disqus：

RxJS 6 提供了更便利的 import 方式，而且套件檔案變小，也可以被 tree-shaking. 但是要如何快速地將 RxJS 5.x 版升級到 RxJS 6 版 ? 以下是升級步驟

方法一

  1. 升級 RxJS 至 5.5.1 (最新版)

  2. 更新至 RxJS 6

    1. RxJS 6
      1. npm install rxjs
      2. npm install rxjs-compat
    2. 使用 Angular CLI 6 1
      1. ng update rxjs

  3. npm install rxjs-tslint

  4. 建立 migrate.tslint.json

    1
    2
    3
    4
    5
    6
    7
    8
    {
      "rulesDirectory": ["node_modules/rxjs-tslint"],
      "rules": {
        "update-rxjs-imports": true,
        "migrate-to-pipeable-operators": true,
        "collapse-rxjs-imports": true
      }
    }

  5. 執行 tslint-fix (可能需要多跑幾次)

    1
    ./node_modules/.bin/tslint -c migrate.tslint.json --project src/tsconfig.app.json --fix`

  6. 修正 tslint.json，將 rxjs 從 "import-blacklist" 中移除

  7. 建置整個專案確定升級成功

  8. 完成整個升級 RxJS

方法二 (快速版)

  1. 全域安裝 rxjs-tslint

    1
    npm install -g rxjs-tslint

  2. 升級 RxJS 至 5.5.1 (最新版)

  3. 更新至 RxJS 6

    1. RxJS 6
      1. npm install rxjs
      2. npm install rxjs-compat
    2. 使用 Angular CLI 6 1
      1. ng update rxjs

  4. 執行下列指令

    1
    rxjs-5-to-6-migrate -p tsconfig.json

  5. 建置整個專案確定升級成功

  6. 完成整個升級 RxJS