技术债务：我是怎么把老项目救活的

大家好，我是你们的老朋友，一个在大厂写了三年代码、业余时间在B站教编程的UP主。今天这篇教程，不是教你搭个Vue3+TS+Vite全家桶，也不是搞什么AI集成——而是实打实地，拯救一个快被技术债务压死的老前端项目。

你可能刚入职一家“历史悠久”的公司，接手了一个用 jQuery + 原生 JavaScript 混搭写的前端项目；也可能你自己几年前写的 demo，现在想改个功能却发现代码像一锅馊了三天的粥。别慌，这太正常了！我当初学的时候，第一次看到那种上千行没注释、变量名全是 a1、b2 的 JS 文件，差点当场卸载 VSCode 改行送外卖。

但后来我发现：技术债务不是洪水猛兽，而是一张待清理的账单。只要方法对，老项目也能焕发第二春。今天就手把手带你，用最接地气的方式，把一个“快死”的项目救活。

---

什么是技术债务？

先说人话：技术债务 = 为了快速上线，欠下的“代码债”。

比如：

• 产品催得急，你写了个临时方案：“先这样吧，后面再重构”
• 团队没人 review 代码，复制粘贴 + 魔改成了日常
• 框架版本三年没升，连 let 都不敢用（还在用 var）

结果就是：改一行代码，崩三个页面；加个按钮，要翻八百个文件。

这不是你的错，但你现在得还债。

---

环境准备：别让工具拖后腿

救活老项目的第一步，不是改代码，而是先把开发环境现代化！

老项目常见问题清单：

问题	后果
没有 package.json	依赖全靠手动复制，根本不知道用了啥库
用 script 标签引入 jQuery / Lodash	无法 tree-shaking，包体积爆炸
没有构建工具（Webpack/Vite）	不能用 ES6+，不能模块化
没有 ESLint / Prettier	代码风格混乱，新人看了想跑

我们的目标环境（最低配）：

1. Node.js >= 16（别用 v10 了，那都进博物馆了）
2. npm / pnpm（推荐 pnpm，快且省空间）
3. VSCode + ESLint + Prettier 插件
4. Git（必须有版本控制！没有就立刻初始化）

💡 避坑指南：不要一上来就重写整个项目！先让它能跑起来，再逐步改造。

---

核心概念：技术债务的三大“毒瘤”

毒瘤1：全局变量泛滥

老项目里经常看到这种代码：

// global.js
var userName = "张三";
var userAge = 25;
function getUserInfo() {
  return userName + "今年" + userAge + "岁";
}

问题在哪？所有变量都在全局作用域！一旦另一个文件也定义了 userName，直接覆盖，bug 找到怀疑人生。

✅ 解法：模块化 + 作用域隔离

// user.js
const userName = "张三";
const userAge = 25;

export function getUserInfo() {
  return `${userName}今年${userAge}岁`;
}

// main.js
import { getUserInfo } from './user.js';
console.log(getUserInfo());

📌 关键点：哪怕不用框架，也要用 ES6 的 import/export 把代码拆成模块！

---

毒瘤2：魔法数字 & 字符串满天飞

// 老代码
if (status === 1) {
  showSuccess();
} else if (status === 2) {
  showError();
}

1 和 2 是啥意思？没人知道。三个月后你回来改，只能靠猜。

✅ 解法：用常量代替魔法值

// constants.js
export const STATUS = {
  SUCCESS: 1,
  ERROR: 2,
};

// main.js
import { STATUS } from './constants.js';

if (status === STATUS.SUCCESS) {
  showSuccess();
} else if (status === STATUS.ERROR) {
  showError();
}

清晰多了吧？而且以后要改状态码，只改一处！

---

毒瘤3：回调地狱（Callback Hell）

老项目常用原生 AJAX，嵌套回调看得眼瞎：

// 地狱模式
getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      // ... 继续嵌套
    });
  });
});

✅ 解法：用 Promise 或 async/await

// 用 async/await 重写
async function fetchAllData() {
  try {
    const a = await getData();
    const b = await getMoreData(a);
    const c = await getEvenMoreData(b);
    return c;
  } catch (err) {
    console.error("请求失败", err);
  }
}

📌 注意：即使老项目不支持 async/await，也可以用 Babel 转译！别怕，现代工具链能兼容 IE11（虽然你可能不需要）。

---

实战项目：给老项目装上“呼吸机”

假设我们接手一个 2018 年写的前端项目，结构如下：

old-project/
├── index.html
├── js/
│   ├── utils.js
│   └── main.js
└── lib/
    └── jquery.min.js

第一步：初始化 npm 项目

cd old-project
npm init -y

第二步：安装基础工具

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
npm install --save-dev eslint prettier

第三步：配置 Webpack（最小可用版）

创建 webpack.config.js：

// webpack.config.js
module.exports = {
  entry: './js/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

第四步：改造 main.js，启用模块化

原 main.js 可能长这样：

// 老 main.js
var app = {
  init: function() {
    $('#btn').click(handleClick);
  }
};
app.init();

改成：

// 新 main.js
import { handleClick } from './utils.js';

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('btn').addEventListener('click', handleClick);
});

💡 技巧：用 document.getElementById 代替 $，逐步摆脱 jQuery！

第五步：添加 ESLint 规则（防坑神器）

创建 .eslintrc.json：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  }
}

然后在 VSCode 里开启保存时自动修复，代码瞬间整洁！

---

常见问题 & 新手避坑指南

❓ Q1：产品说“不能动现有功能”，但我又想重构，怎么办？

A：采用“绞杀者模式”（Strangler Pattern）

• 新功能用新架构写
• 老功能不动，但调用新模块
• 逐步替换，直到老代码完全消失

❓ Q2：团队没人懂现代前端，怎么推动改造？

A：从小处入手，用数据说话

• 先修复一个高频 bug，用新方式实现，对比耗时
• 展示 ESLint 如何自动避免低级错误
• 证明“短期多花1小时，长期少加班10小时”

❓ Q3：要不要直接上 Vue/React？

A：别！除非产品同意重做 UI
老项目救活的核心是 可维护性，不是炫技。
先做到：模块化 + 自动化 + 类型安全（TS 可选），再考虑框架。

---

学习建议：下一步怎么走？

1. 掌握 Git 分支管理：每次改造开新分支，git checkout -b refactor/utils
2. 学习单元测试：用 Jest 写几个简单测试，确保重构不崩
3. 了解 TypeScript：哪怕只加类型注解，也能减少 50% 的运行时错误
4. 关注性能：用 Lighthouse 测老项目，你会发现 bundle.js 动辄 2MB+

---

最后说两句

技术债务不可怕，可怕的是假装它不存在。
我见过太多团队，一边抱怨代码烂，一边继续往里面堆屎山。

真正的专业，不是写出完美代码，而是在烂泥里种出花来。

如果你今天只记住一件事，请记住：

“每一次小重构，都是对未来的自己最好的投资。”

好了，这篇干货够你消化一阵子了。如果觉得有用，欢迎去B站搜我的频道（ID：代码人生讲师），我会持续更新“老项目拯救计划”系列！

下期预告：《如何说服产品经理同意你重构代码？》—— 敬请期待！

---

本文约2457字，纯手打无图，适合收藏反复食用。