ESLint + lint-staged + husky 三剑客之老项目如何过渡升级？

ESLint作为插件化的javascript代码检测工具，为我们的平时的开发保驾护航，好处就不多说了详情查看官网。

有这么一个五年前开发的老项目，机缘巧合到了我们这边来维护。

项目是zepto撸起来的，单个文件巨大，只有gulp+公司内部古老的打包工具做了下简单的打包。

但是问了一圈公司这边前端同学，基本对这个项目毫无所知。

甚至管理系统中没有这个项目的任何记录，唯一能找到的就是代码，公司的另一位运维同事还帮我找了下项目的服务器的地址和账号。

这个项目的代码维护现状如下：

1. 十分庞大，初始化十分缓慢，mac提示说打开的文件数量超过限制
2. 前端代码是一个文件，后端代码是一个文件，根据业务的不同，这两个文件的代码会合并在一起作为打包产出。
3. gulp和打包工具早已淘汰，已经找不到相关的资料。
4. 虽说是zepto撸起来，但使用了非常多市面上不流行的zepto的插件。

通过这样的一个现状分析，我了解到项目的情况后，给项目定义了如下的几个目标：

1. 引入ESlint + lint-staged + husky对代码质量进行管理。
2. 剥离zepto，实现打包工具升级。
3. 实现老项目和新项目统一标准，规范版本管理，保证一致代码质量。

既然已经明确了目标，那么接下来就进行一些规划了。

1. 首先，先使用git对代码进行初始化，配置gitlab仓库，这里涉及到项目仓库的命名问题，因为公司内部要求一致，所以我们需要做到老项目的仓库名与新项目的仓库名保持一致。
2. 然后，创建一个脚手架项目，然后初始化ESlint + lint-staged + husky，配置相关规范，配置package.json，简单尝试使用webpack打包。
3. 对老项目的各个逻辑文件进行拆分，按模块组建进行重写，并对新逻辑进行ESLint规范，接着对一些旧逻辑进行ESLint规范和优化。
4. 写好逻辑后，根据各个逻辑的关联性进行组合，组合成最终的main文件。
5. 使用webpack进行打包。
6. 这样子完成了项目的前端模块化拆分工作，以及代码的规范化工作，webpack相关的可以参考webpack官方文档，这里不再展开介绍。
7. 接下来，还需要将此仓库与主项目的仓库进行合并，代码的合并包括代码逻辑合并，提交历史合并。
8. 最后，再次对项目的逻辑做个梳理，这样老项目就算成功升级了。

整个步骤看上去很繁琐，我们可以对这些步骤进行一些优化：

1. 我们可以使用monorepo的方式对项目进行管理，monorepo简单来说就是可以把多个代码库的所有内容放到同一个库中，然后对不同项目的代码进行统一的管理，github上有很多开源的monorepo工具，比如yarn workspaces、lerna等。使用monorepo之后，很多项目可以并行开发，同步成本也变得很低，管理起来更加方便。
2. 我们将项目与脚手架项目融合起来，这样子我们就不需要手动初始化ESLint + lint-staged + husky，只需要进行一次配置即可，这样我们就省去了这个步骤。
3. 我们使用代码合并工具，比如git merge-tool，合并仓库代码可以变得更加容易，可以减少由于提交历史和逻辑的历史差异带来的困扰，只需要考虑代码逻辑和仓库逻辑即可。

当然，为了方便后续维护，我们可以写一篇文档记录整个迁移的过程，这样后面遇到类似需求的同学就可以直接参照文档完成迁移了。

经过了以上的一些努力，我们终于实现了老项目的升级，并且达到了原先设定的目标。

1. 对代码质量进行了管理。
2. 剥离了zepto，实现了打包工具升级。
3. 老项目和新项目统一标准，规范版本管理，保证了一致代码质量。

当然，在整个升级的过程中，我们可能还会遇到其他的问题，这里不再做更多的阐述，老项目升级的目的就是要做到新老项目代码规范统一，更易于维护。