背景：由于团队业务扩展较快的原因，项目从一个，两个到三个；为了提高项目的可维护性，于是决定了重构。两个月的时间，有限的知识储备，完成了第一次重构。
一、重构我都做了什么？
- 参考monorepo的思想，合并项目、拆分组件
- JS迁移到TS
- 首页优化
- css规范处理
- 添加单元测试
- 添加前端监控
二、参考monorepo的思想，合并项目、拆分组件
1.合并项目
其实对于我们团队的这三个项目，有很多公共的组件，就要考虑是否可以将这些公用组件提取，提高项目可维护性。具体操作方式，可以先看一张图片，country和star就是代表的两个不同的项目，通过在config中的配置来决定当前启动的项目。
更多的细节以及仓库可以参考我这篇文章多个项目提取共用组件的解决方案。
2.拆分组件
考虑需要提取或者拆分的：组件、静态资源、以及样式。当然对于拆分后组件绝对路径的引用，还是要考虑的。这块的配置我已经写到了appConfig.j文件中s（上面的链接中有源码），对于我们这三个项目，我提取了components，views，assets，styles，当然该提哪些部分，还是需要依照项目来定。
三、JS迁移到TS
刚开始接触TS也许并不能感受到它的强大，但是当项目变大的时候，TS真的给我们能提高很多的开发效率，降低维护成本。
当然，目前很多公司已经在向TS迁移项目，我们也不例外。不过怎么开始，先迁移哪些都是问题，下面只是我个人的做法。
-
需要明白，我们当前的项目一定是，在js和ts同时都存在的情况下，还能正常运行。
- eslint的配置：以vue为例，用vueCLI初始化一个TS版本的项目。copy我们项目的几个页面，通过配置eslint使其可以运行，目的是为了将校验先设置为警告，从宏观来看，以最快的时间适配项目。简单看一下我们项目中一开始eslint中rules的配置。
也有人用tslint来代替eslint,我更建议用eslint，毕竟tslint是停止维护的。
// eslint.js rules: { 'no-cond-assign': 'warn', 'no-redeclare': 'warn', 'no-sparse-arrays': 'warn', 'no-useless-catch': 'warn', 'no-useless-escape': 'warn', 'no-unsafe-finally': 'warn', 'prefer-rest-params': 'warn', 'no-empty': 'warn', 'no-empty-function': 'warn', '@typescript-eslint/camelcase': 'warn', '@typescript-eslint/no-empty-function': 'warn', ... 复制代码
}
```
2. 合理使用 @ts-ignore与any： 其实一般来说，一个项目是由多人完成的，当你重构的别人代码的时候，遇到一些很难理解的逻辑，我们可以临时用@ts-ignore来忽略；当有一些函数的参数需要多种类型的适配，我们也可以先采用any来忽略其参数类型。当然我也是这么做的（毕竟排期是有限的）
3. 建立类型文件： /src/@types/index.d.ts文件，还是需要将一些通用的类型单独拿出来的，因为ts默认会查找识别@types下*.d.ts文件，也就是说这里的类型，在当前项目所有组件中都可以使用
4. 迁移顺序：compenents ——> views ——> utils
四、首页优化
一个项目在对于用户首先接触的是首页，所以首页的加载非常重要，这块我只是做了四个地方
- 为public/index.html添加加载动画
- 路由懒加载
- 将一些库（比如echarts）， 从npm转为mdn方式引入，关于引入方式请看我这篇文章项目优化之CDN配置
- webpack对于生产环境的配置，合理使用一些webpack插件，比如用compression-webpack-plugin来压缩代码
五、css规范处理
css是很容易忽视的部分，可这部分如果不认真对待，对于后期的维护者极其恶心。对于这部分
- 正常来说，!important是不能出现的
- 以vue为例来说scoped一定是不能省略的。当然对于类似elementui组件样式的更改，可用::v-deep
<style lang="scss" scoped>
::v-deep .el-input {
color: "#eee"
}
</style>
复制代码- 对于我们项目来说，我把所有颜色都采用常量的形式提出，方便维护（因为我们后期也有更换主题的需求）
// color.scss
$primary-purple: #706cf5
$secondary-purple: #4c3f7f;
// index.vue
.link {
color: $primary-purple;
&:hover {
color: $secondary-purple;
}
}
复制代码- 采用BEM命名规范：block-name__element-name--modifier-name，也就是模块名(组件文件名) + 元素名 + 修饰器名）
六、添加单元测试
一般大一些的项目都会添加单元测试，关于vue单元测试的添加可参考我这篇文章试着为vue项目添加单元测试
七、添加前端监控
前端监控目前还是有很多的解决方案，对于我们项目，我用了fundebug（收费），个人认为，完全满足我们的需求
七、对于项目我还做了这些操作
- 兼容IE，参考文章通过vuecli3.0+兼容IE踩坑记录，学习解决问题的方式
- 前后端错误映射处理，参考文章分享一个自己手写的前后端错误映射方案
八、总结
经验有限，水平有限，期望评论区指正；当然如果觉得有用，可以点个赞的😜
