缘由
之前在YW公司,经历了一个老项目,vue项目长达2年。开发的过程中,启动就需要5分钟。编译也比较慢。作为一个对开发体验有追求的前端,实在是忍受不了。所以在一次机缘之下,对项目进行了一次升级。原本的VUECLI2变成了VUECLI4.编译启动从5分钟变成1分钟,常规代码编译也有所提升。
吐槽
之前不是离职了吗?我会把我能迁移项目这个能力拿出来讲。但是基本上这些公司都不关注,或者不在意这些。我想项目负责人更多的是要稳定。反正就是能用就行。我不知道我做到的是不是对的。但是你作为一个项目负责人,不应该要保证项目是可持续维护吗?
再一个就是很多公司会觉得你这不就是一个小东西吗?还拿出来秀。那请问你怎么不干呢?鄙视别人之前自己行不行没有点B数吗?
听到我只是把cli2变成cli4就觉得没什么东西可以说的。那你知道中间有多少坑吗?
迁移行为分析
1、项目有时候真的不是越新越好,当两个版本之间出现巨大的变化的时候,其实应该要考虑你的技术架构是不是老了
2、我们做项目迁移和升级的目的是什么——框架的活跃度和项目生命周期
3、论去中心化思想在项目中的重要性——良好的项目规范和去中心化思想能让项目生命周期更长。减少祖传代码
一、版本分析
首先你电脑上面必须要有vuecli2版本的初始版本和vuecli3,4的一个项目demo。你第一要做的就是区分出两者之间的区别。
个人总结版本分析:
1、静态资源文件统一归类,cli3开始放入plulic下面,但是2为static,两者行为一致
2、大家都是用src作为开发目录,那么其实就没什么,直接拷贝就行了
3、webpack配置的差异,非常巨大,cli2为build和config方式,完全是webpack目录格式。但是cli3之后将build目录单独成为一个npm包,所有配置都由vue.config.js接管
4、package.json差异非常大,cli3进行了简化,npm包进行了高度浓缩,cli2就非常丑,而且很累赘
5、index.html也有所差异,但是自己拷贝就行了
6、根目录其余eslint,babel等配置检查
二、项目分析
迁移目标1:项目迁移之后大bug没有,接口跑起来,文件无报错
上面做了版本分析,主要是需要认清你当前项目和老项目之后会有多大的差异。下面是项目分析
1、你需要反复对比config,和bulid两者文件夹,之前都做了哪些优化,配置,会影响项目的。一般主要是config会影响项目运行,build部分多是优化部分。关键是分析出所有和原始的cli2不一致的部分,所有的不一致你都需要在vue.config.js中实现
2、eslint,babel等配置进行分析,一般进行拷贝移植就行了
3、对你的package.json部分进行分析,找出所有cli2中不一致的部分,这些都是后期打入的包,注意版本
三、迁移开始
1、准备一个最新的cli4的vue项目初始,项目创建一般会有eslint,babel,非ts等。主要是需要根据你上述的几步分析,得出你需要的基础的项目应该怎么创建
2、src文件直接拷贝
3、index.html部分和static部分放入plulic里面。这里最怕的是有人用相对路径引入静态文件。没有那就最好
4、npm包注意版本的情况下,打入新的vue项目中,版本很重要。注意指定版本install
5、抛开webpack所有优化部分,对把之前bilud和config中的配置,配置到vue.config.js中
到了这一步,其实你可以启动下项目,如果没什么大问题那么基本上是迁移完成了。后面就是查漏补缺
四、为什么没有提到去中心化思维
其实不是我没有提到,而是其实这处于项目的方方面面
举例:
1、vuecli2到cli3进行了项目升级,配置文件独立成npm包,config文件抽离
2、src目录和public目录的更加规范
3、项目中axios二次封装
4、各种功能函数的封装
……………………
最关键是你的项目如果结构清晰,分离有序,那么你的项目就可迭代,可维护,生命周期会更长,至少多延续2年。
项目如何选型
说点题外话,其实上面就是大致的我在之前公司对vue项目的进行的升级。并且成功运行上线,优化效果不错。而且当时我在无网络环境下进行升级成功的。这也是我离职的核心问题。我发现我无法忍受这种环境。是我太追求新东西了。
后面找工作一个月都没有好的公司。唉!现在公司,我也是无奈之举。但是办公环境还是比较喜欢的
回归正题:
1、你作为项目负责人该如何去选型你的技术框架
个人要点:热门,社区活跃,文档完善,入门难度低,保证未来3年项目可维护,可升级。
2、为什么vue更火了呢?
因为vue入门难度低,react非常好,但是他难,所以vue后来居上
3、ts为什么传的很火,也需要学习,但是项目中为什么应用很少
因为招不到人,因为实际情况下会导致项目成为祖传代码
4、你作为项目负责人,是不是还在追求你的代码无注释,变量名称就是注释的行为
我只能说,愚蠢。你要是担心后面的人会抢你的饭碗,会替代你,你怎么不想想你为什么可以被替代。
5、比如现在小程序框架很多,但是热门就是uniapp和taro。还有mpvue,mpx,wepy等等
选taro,选uniapp是因为火热,并且用的人确实非常多,wepy是官方维护,至少说小程序不似,wepy不死。那么选mpvue,mpx的呢?
不是我不选择小众框架,但是如果你无法保证该框架可维护,可迭代,或者生命周期。那么请不要选择,不然就是坑。
6、都说大公司都是从小公司来的。但是一个大公司,一个小公司,你选哪个?
后面还会有一篇博客,是我最近做的,把wepy项目迁移到uniapp。有人说我傻?那么其实迁移的目的是什么?下一次我会发表我的看法