您好,登錄后才能下訂單哦!
前言
前段時(shí)間將所負(fù)責(zé)的 Angular2 項(xiàng)目升級(jí)到了 Angular5 版本,這兩天又進(jìn)行了升級(jí)至 Angular6 的嘗試。總的來(lái)說(shuō),兩次升級(jí)過(guò)程比較類似,也不算復(fù)雜。
2018年5月4日,Angular6.0.0版正式發(fā)布,新版本主要關(guān)注底層框架和工具鏈,目的在于使其變得更小更快。
特性的小改動(dòng):
0. 項(xiàng)目特點(diǎn)
該項(xiàng)目有如下特點(diǎn):
項(xiàng)目升級(jí)后也沒(méi)有使用 @angular/cli,繼續(xù)采用 fis3 作為編譯工具。這一是因?yàn)樵S多歷史悠久的代碼風(fēng)格無(wú)法通過(guò) tslint 校驗(yàn),ng build 根本無(wú)法執(zhí)行通過(guò);二是因?yàn)轫?xiàng)目的部分代碼編寫和構(gòu)建與發(fā)布流程使用了一些 fis3 的特性,改造成本較大。而且經(jīng)過(guò)比對(duì),@angular/cli 的編譯過(guò)程并沒(méi)有比 fis3 好很多。
下面簡(jiǎn)要介紹一下升級(jí)的過(guò)程和方法。
1. 更新 package.json 的依賴
將 Angular 依賴庫(kù)改為 ^6.1.0 版本,并且注意項(xiàng)目依賴的 Angular 組件庫(kù)的兼容版本更新。如我們的項(xiàng)目依賴有如下變更:
注意:一些組件庫(kù)的 API 也會(huì)有不兼容更新,相關(guān)代碼邏輯應(yīng)作改進(jìn)(可在升級(jí)完成后根據(jù)文檔和錯(cuò)誤提示去調(diào)試和修改)。
升級(jí)后的項(xiàng)目依賴參考:
{ "devDependencies": { "@compodoc/compodoc": "^1.1.5", "@lzwme/simple-mock": "~0.0.8", "@types/core-js": "^0.9.46", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "@types/webpack": "~2.2.14", "angular2-template-loader": "~0.6.2", "awesome-typescript-loader": "~3.2.3", "body-parser": "1.17.0", "cookie-parser": "1.4.3", "cross-env": "^5.1.6", "debug": "2.6.1", "ejs": "2.5.6", "express": "4.15.0", "fis-optimizer-htmlmin": "0.1.2", "fis-optimizer-png-compressor": "0.2.0", "fis-parser-less": "0.1.3", "fis-parser-pug": "0.0.1", "fis-postpackager-replace": "0.0.3", "fis3": "3.4.39", "fis3-deploy-local-supply": "0.0.2", "fis3-hook-commonjs": "0.1.27", "fis3-hook-node_modules": "2.3.1", "fis3-hook-relative": "2.0.3", "fis3-packager-deps-pack": "0.1.2", "fis3-parser-typescript": "^1.2.2", "fis3-postpackager-loader": "2.1.11", "fis3-preprocessor-cssprefixer": "0.0.2", "fis3-preprocessor-js-require-css": "0.1.3", "fis3-preprocessor-js-require-file": "0.1.3", "fis3-preprocessor-ng2-inline": "0.0.1", "fs-extra": "^6.0.1", "http-proxy": "1.16.2", "husky": "^0.14.3", "istanbul-instrumenter-loader": "^3.0.1", "jasmine-core": "^3.1.0", "karma": "^2.0.2", "karma-chrome-launcher": "^2.2.0", "karma-coverage": "^1.1.1", "karma-coverage-istanbul-reporter": "^2.0.1", "karma-jasmine": "^1.1.2", "karma-jasmine-html-reporter": "^1.1.0", "karma-mocha-reporter": "^2.2.5", "karma-remap-coverage": "^0.1.5", "karma-sonarqube-unit-reporter": "^0.0.14", "karma-sourcemap-loader": "~0.3.7", "karma-webpack": "^3.0.0", "less": "^3.0.4", "less-loader": "^4.1.0", "liftoff": "2.3.0", "lint-staged": "^7.1.3", "minimist": "1.2.0", "morgan": "1.8.1", "prettier": "^1.13.5", "pug": "^2.0.3", "pug-html-loader": "^1.1.5", "raw-loader": "~0.5.1", "serve-favicon": "2.4.1", "stylelint": "^9.4.0", "stylelint-config-prettier": "^4.0.0", "supervisor": "^0.12.0", "to-string-loader": "^1.1.5", "tslint": "^5.10.0", "typedoc": "^0.11.1", "typescript": "^2.8.3", "webpack": "~3.6.0" }, "dependencies": { "@angular/animations": "^6.1.0", "@angular/common": "^6.1.0", "@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", "@angular/forms": "^6.1.0", "@angular/http": "^6.1.0", "@angular/platform-browser": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", "@angular/router": "^6.1.0", "@ngrx/router-store": "6.1.0", "@ngrx/store": "^6.1.0", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.0", "angular-tree-component": "^7.2.1", "buffer": "4.9.1", "core-js": "^2.5.7", "fis-mod": "1.0.1", "is-buffer": "1.1.4", "jquery": "1.12.4", "moment": "2.18.1", "ngrx-store-freeze": "0.2.4", "ngrx-store-logger": "0.2.2", "process": "0.11.9", "reflect-metadata": "0.1.12", "rxjs": "^6.0.0", "rxjs-compat": "^6.2.2", "throttle-debounce": "^2.0.1", "zone.js": "0.8.26" } }
2. 添加 rxjs-compat 依賴
為了兼容 rxjs 5 的用法,必須引入 rxjs-compat。
添加依賴:
yarn add rxjs-compat
然后在項(xiàng)目入口文件 main.ts 中引入它:
import 'rxjs-compat';
注意,后續(xù)的開發(fā)應(yīng)有意識(shí)地以 rxjs6 的新寫法去編碼。
當(dāng)然,如決定改掉 rxjs5 的舊寫法,可以移除對(duì) rxjs-compat 的引入,參照瀏覽器錯(cuò)誤提示去一一修改即可。
3. 按官方指引和項(xiàng)目實(shí)際情況選擇性操作
打開 Angular 官方升級(jí)指引網(wǎng)站 https://update.angular.io 按提示和項(xiàng)目實(shí)際情況操作。
實(shí)際上項(xiàng)目沒(méi)有太多高級(jí)的用法,需要修改的內(nèi)容并不多。大致有以下幾點(diǎn):
npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json
以上操作完成后,嘗試啟用項(xiàng)目構(gòu)建編譯,如無(wú)報(bào)錯(cuò)即已成功升級(jí)。
總結(jié):
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。