两个月的时间，我重构了三个项目其实对于我们团队的这三个项目，有很多公共的组件，就要考虑是否可以将这些公用组件提取，提高项

背景：由于团队业务扩展较快的原因，项目从一个，两个到三个；为了提高项目的可维护性，于是决定了重构。两个月的时间，有限的知识储备，完成了第一次重构。

一、重构我都做了什么？

参考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踩坑记录，学习解决问题的方式
前后端错误映射处理，参考文章分享一个自己手写的前后端错误映射方案

八、总结

经验有限，水平有限，期望评论区指正；当然如果觉得有用，可以点个赞的😜

两个月的时间，我重构了三个项目