@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

chalk 没有明确表示 node 版本，但是标注了其已经在 chalk v5 之后采用 ESM 语法，所以说 <node v16 只能用 chalk v4， ≥node v16 可以使用 chalk v5+

代码编写

代码技术规范

老旧项目开发、运行环境有可能比较老旧（比如说node v6），一定一定一定不要用超过当前环境的语法，不然会直接 Error 弹出

// 老项目的环境不一定支持可选运算符
instances[3]?.information.address

/* 更老的环境连部分依赖的东西都没法用
 * 比如说下面语法只有 node v8 之后才支持
 */
Object.entries(obj)

所以说能使用 ES5 就尽量使用 ES5，最多使用到node版本发布那一年

有人会说可以用babel，这里会有两个问题：
1、你要自己重新找版本(或者说是测试哪儿个版本能使用)
2、修改框架可能造成的兼容异常等等需要测试组测试，会影响工期

注释规范

老旧项目开发一定一定一定要写好注释，若注释与eslint 冲突优先保证注释

变量注释

/* eslint-disable spaced-comment */
modal: {
    createModal: false,  // 创建弹窗
    editModal: false,    // 编辑弹窗
    deleteModal: false   // 删除弹窗
}
/* eslint-enable spaced-comment */

同种功能注释

// 创建弹窗相关事件
/* 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混入式)

<!-- 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)
-->

有翻译一定要写翻译注释

// title: this.$t('instances.name'), // 名称
<Button type="primary" v-if="thisPermission.create" :disabled="false"
@click="linkToUpload">
{{ $t('images.create_images')/* 创建云镜像 */ }}
</Button>

当然别忘了备注版本

{
    // v1.7.3 update
    'name': '名称',
    'uuid': 'ID',
    'image_name': '云镜像名称',
    ....
    // v1.7.2 old
}

维护篇(荒屋重修篇)

也许可以帮你略微升级一下框架、架构

环境升级

node 版本切换

若老项目涉及到 node 升级，请注意一下
请安装 nvm node版本管理器，

优点：能快速切换node版本
缺点：部分windows系统需要重新配置环境才能正常使用 npm 全局工具包

对了，记得确定升级的目标版本，比如说ndoe v16， ndoe v14

项目启动

1、尝试像以前一样启动项目

如果项目正常启动，说明你完成了一半
启动失败可以在运行日志里面找到对应模块加载失败日志，再通过 npmjs 或者 搜索引擎 寻找对应兼容版本。

特殊情况

node-sass 对中间依赖要求很高(~~兼容性很难受~~)

请注意配套的 sass-loader 版本
请注意项目 webpack 所支持的 sass-loader 最高版本
请不要随便升级 webpack ，因为会涉及到很多一来同步升级，若是必须升级 webpack，请一定一定一定在项目进度真空期操作，不然会影响当前项目进度
若是 sass 文件很少，可以考虑将 sass 重构成 less 完成环境升级

2、尝试本地打包后自动运行

运行项目正常一般能顺利打包

建议使用 nginx 本地启动运行，简单测试一下生产状态下的页面/模块

3、自动化部署

下列情况可以无视该模块内容：

node 目标版本比较高，如： node v12
开发时操作系统是MacOS 或者 Linux
公司内部有自动化部署流程，如 jenkins

若上述情况都没有，那么恭喜你，悲催了
（；´д｀）ゞ
因为node环境更新新了，但没完全新，所以说请注意测试在 linux 环境下是否能正常打包部署
linux 系统版本尽量与与自动化部署的服务器保持一致，不然建议使用 ubuntu
ubuntu官方镜像下载
 ubuntu官方镜像下载(官方中文)

虚拟机建议使用 Vmware 个人版(免费)进行打包部署测试
Vmware 个人版下载地址
 Vmware 个人版下载地址(官方中文)

nvm linux 安装方法
nvm官方代码仓库
 知乎大佬总结方法

前端老项目开发维护指南

前言