> @author：郭瑞峰 > @createTime: 2022/03/24 > @updateTime: 2023/04/09 # 前言 我的第一份工作就是开发和维护前端老项目，项目涉及到云计算。项目于2017年开始立项开发，项目很大，所用到的技术也很古老(2017年只有`node v6`)，请自动脑补开发维护难度。 (￣_,￣ ) 这里就写一些我开发维护老旧项目时遇到的问题，当然也要总结经验，让好友们有所涉及，要是有提升当然更好。 Ψ(￣∀￣)Ψ # 开发篇(废土种植篇) 你不能决定你的技术有多新 所以说想办法兼容吧 ## 依赖包 一般可以在 `npmjs` 官网上找到所需的依赖，但这里必须得说有些最新版依赖无法直接使用，**必须找到对应的node版本才行** `for example: node-sass`  其二就是`node`是否支持 `ESM` 语法(这里我说的不太清楚，比如说`node v16`之后能直接运行`ESM`语法，而 在此之前必须使用 `CommonJS`) `for example: chalk.js` [](https://kitaikuyo.one/usr/uploads/2023/04/2152760833.png "chalk") `chalk` 没有明确表示 `node` 版本，但是标注了其已经在 `chalk v5` 之后采用 `ESM` 语法，所以说 `<node v16` 只能用 `chalk v4`， `≥node v16` 可以使用 `chalk v5+` ## 代码编写 ### 代码技术规范 老旧项目开发、运行环境有可能比较老旧（比如说`node v6`），**一定一定一定不要用超过当前环境的语法**，不然会直接 `Error` 弹出 ``` javascript // 老项目的环境不一定支持可选运算符 instances[3]?.information.address /* 更老的环境连部分依赖的东西都没法用 * 比如说下面语法只有 node v8 之后才支持 */ Object.entries(obj) ``` 所以说能使用 `ES5` 就尽量使用 `ES5`， 最多使用到`node`版本发布那一年 > 有人会说可以用babel，这里会有两个问题： > 1、你要自己重新找版本(或者说是测试哪儿个版本能使用) > 2、修改框架可能造成的兼容异常等等需要测试组测试，会影响工期 ### 注释规范 老旧项目开发一定一定一定要写好注释，**若注释与`eslint` 冲突优先保证注释** * 变量注释 ``` javascript /* eslint-disable spaced-comment */ modal: { createModal: false, // 创建弹窗 editModal: false, // 编辑弹窗 deleteModal: false // 删除弹窗 } /* eslint-enable spaced-comment */ ``` * 同种功能注释 ``` javascript // 创建弹窗相关事件 /* eslint-disable */ //#region 代码折叠，兼容webstorm和vscode openCreateModal () { this.createModal = true }, cancelCreateModal () { this.createModal = false }, successCreateModal () { this.createModal = false this.resetSearch() this.getList() } //#endregion /* eslint-enable */ ``` * 混入式变量一定要写出处(比如说vue混入式) ``` vue <!-- searchView: mixins(dataList).data listLoading: mixins(dataListConfig).computed => vuex(instances).state(listLoading) listData: mixins(dataListConfig).computed => vuex(instances).state(listData) tableColumns:mixins(dataListSetCol).computed => mixins(dataListColConfig).data(columnsViewArr) => mixins(dataListColConfig).data(columnsObj) total: mixins(dataListConfig).computed => vuex(instances).state(total) listPageNum: mixins(dataListConfig).computed => vuex(instances).state(listPageNum) --> ``` * 有翻译一定要写**翻译注释** ```html // title: this.$t('instances.name'), // 名称 <Button type="primary" v-if="thisPermission.create" :disabled="false" @click="linkToUpload"> {{ $t('images.create_images')/* 创建云镜像 */ }} </Button> ``` 当然别忘了**备注版本** ```javascript { // v1.7.3 update 'name': '名称', 'uuid': 'ID', 'image_name': '云镜像名称', .... // v1.7.2 old } ``` # 维护篇(荒屋重修篇) 也许可以帮你略微升级一下框架、架构 ## 环境升级 ### node 版本切换 若老项目涉及到 `node` 升级，请注意一下 请安装 `nvm` **node版本管理器**， 1. 优点：能快速切换`node`版本 2. 缺点：部分windows系统需要重新配置环境才能正常使用 `npm` 全局工具包 对了，记得确定升级的目标版本，比如说`ndoe v16`， `ndoe v14` ### 项目启动 1、 尝试像以前一样启动项目 如果项目正常启动，说明你完成了一半 启动失败可以在运行日志里面找到对应模块**加载失败日志**，再通过 `npmjs` 或者 `搜索引擎` 寻找对应兼容版本。 * 特殊情况 `node-sass` 对中间依赖要求很高(~~兼容性很难受~~) 1. 请注意配套的 `sass-loader` 版本 2. 请注意项目 `webpack` 所支持的 `sass-loader` 最高版本 3. 请不要随便升级 `webpack` ，因为会涉及到很多一来同步升级，若是**必须升级 webpack**，请一定一定一定在项目进度真空期操作，不然会影响当前项目进度 4. 若是 `sass` 文件很少，可以考虑将 `sass` 重构成 `less` 完成环境升级 2、 尝试本地打包后自动运行 运行项目正常一般能顺利打包 建议使用 `nginx` 本地启动运行，简单测试一下生产状态下的页面/模块 3、 自动化部署 下列情况可以无视该模块内容： 1. `node` 目标版本比较高，如： `node v12` 2. 开发时操作系统是`MacOS` 或者 `Linux` 3. 公司内部有自动化部署流程，如 `jenkins` 若上述情况都没有，那么恭喜你，悲催了 （；´д｀）ゞ 因为`node`环境更新新了，但没完全新，所以说请注意测试在 `linux` 环境下是否能**正常打包部署** `linux` 系统版本尽量与与自动化部署的服务器保持一致，不然建议使用 `ubuntu` [ubuntu官方镜像下载](https://ubuntu.com/download/desktop "ubuntu官方镜像下载") [ubuntu官方镜像下载(官方中文)](https://cn.ubuntu.com/download/desktop "ubuntu官方镜像下载(官方中文)") 虚拟机建议使用 Vmware 个人版(免费)进行打包部署测试 [Vmware 个人版下载地址](https://www.vmware.com/products/workstation-player.html "Vmware 个人版下载地址") [Vmware 个人版下载地址(官方中文)](https://www.vmware.com/cn/products/workstation-player.html "Vmware 个人版下载地址(官方中文)") nvm linux 安装方法 [nvm官方代码仓库](https://github.com/nvm-sh/nvm "nvm官方代码仓库") [知乎大佬总结方法](https://zhuanlan.zhihu.com/p/483015085 "知乎大佬总结方法") 最后修改：2023 年 04 月 09 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏