内容简介:前段时间将所负责的 Angular2 项目升级到了 Angular5 版本,这两天又进行了升级至 Angular6 的尝试。总的来说,两次升级过程比较类似,也不算复杂。该项目有如下特点:项目升级后也没有使用 @angular/cli,继续采用 fis3 作为编译工具。这一是因为许多历史悠久的代码风格无法通过 tslint 校验,
前段时间将所负责的 Angular2 项目升级到了 Angular5 版本,这两天又进行了升级至 Angular6 的尝试。总的来说,两次升级过程比较类似,也不算复杂。
0. 项目特点
该项目有如下特点:
- 历史悠久,项目庞大,源码文件数量近千
- 业务代码为主,极少应用 Angular 高级特性(升级简单)
-
采用
pug
编写 html 结构 -
采用
Less
编写 css 样式 -
采用
Express
和http-proxy
实现 server 及后端 API 的代理 -
采用
compodoc
生成文档 -
采用自开发的
@lzwme/simple-mock
实现 API mock - 采用 Fis3 编译,项目源码中深度使用了 fis3 的一些文件引用特性
- 采用 webpack 和 karma、jasmine 配置和执行单元测试
-
采用
styleLint
、tsLint
、husky
和prettier
执行编码风格校验及格式化处理
项目升级后也没有使用 @angular/cli,继续采用 fis3 作为编译工具。这一是因为许多历史悠久的代码风格无法通过 tslint 校验, ng build
根本无法执行通过;二是因为项目的部分代码编写和构建与发布流程使用了一些 fis3 的特性,改造成本较大。而且经过比对,@angular/cli 的编译过程并没有比 fis3 好很多。
下面简要介绍一下升级的过程和方法。
1. 更新 package.json 的依赖
将 Angular 依赖库改为 ^6.1.0
版本,并且注意项目依赖的 Angular 组件库的兼容版本更新。如我们的项目依赖有如下变更:
-
@ngx-translate/core
需要更新至^10.0.2
版本; -
angular-tree-component
需要更新至7.x
版本; -
@ngrx/store
需要更新至^6.1.0
版本;
注意:一些组件库的 API 也会有不兼容更新,相关代码逻辑应作改进(可在升级完成后根据文档和错误提示去调试和修改)。
升级后的项目依赖参考:
{ "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/core": "^1.2.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
然后在项目入口文件 main.ts
中引入它:
import 'rxjs-compat';
注意,后续的开发应有意识地以 rxjs6 的新写法去编码。
当然,如决定改掉 rxjs5 的旧写法,可以移除对 rxjs-compat
的引入,参照浏览器错误提示去一一修改即可。
3. 按官方指引和项目实际情况选择性操作
打开 Angular 官方升级指引网站 https://update.angular.io 按提示和项目实际情况操作。
实际上项目没有太多高级的用法,需要修改的内容并不多。大致有以下几点:
-
如有用到
extends OnInit
,应该为implements OnInit
方式 -
模板中如有用到
<template>
标签,将它改为<ng -template>
。全局查找和替换即可。 -
HttpModule
和Http
应分别改用HttpClientModule
和HttpClient
。HttpClient 支持拦截器,这可以在 http 请求过程中实现注入,实现更自由的逻辑,如角色权限验证等。项目中的 http 请求已经基于Http
模块进行了封装,所以这一步可以忽略。但应考虑全局改进 http 封装,或者在后续的开发中采用 HttpClient。 -
全局安装
rxjs-tslint
,执行源码级的升级,主要是修改rxjs@6
废弃的用法。这个操作会修改很多文件。
npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json
以上操作完成后,尝试启用项目构建编译,如无报错即已成功升级。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 旧项目升级爬坑
- Flutter项目之app升级方案
- 项目的升级-给RemoveButterKnife插件增加新功能
- 好用的项目初始化工具 SCION 升级啦!
- 在线表格 XSpreadsheet 1.0.0 发布,原项目升级
- 在线表格 XSpreadsheet 1.0.0 发布,原项目升级
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
RGB转16进制工具
RGB HEX 互转工具
在线进制转换器
各进制数互转换器