上一篇主要是对新项目的一些介绍和对技术栈升级的思考,之前也提到,既然是新项目,从0开始,没有历史包袱,应该可以放手玩了。但考虑到如何能让老项目受益,并且从技术架构的普适性去考虑,需要横向扩展,让更多项目受益,让更多开发人员参与进来,接下来我会从以下几个方面去选定。
在现有项目中的构建打包流程是gulp和webpack结合使用的,gulp负责任务的优先级调度执行,webpack负责各模块的依赖分析打包,在这个项目中我的计划是放弃使用gulp,因为经过调研发现webpack4.x 完全能满足这种轻量级项目的构建需求,并且可以做到简单化,还具备稳定性,具体细节我会在下一章的环境搭建中讲到。
所以,对于构建环境可以明确是基于webpack完成环境的配置搭建。
该项目是基于前端后端分离的方案实现,前端包含:api服务和客户端页面两部分,api服务是基于koa2的nodejs中间层服务,客户端是基于vue的多页面入口的设计。
koaJS是我近几年一直使用的node开发框架,从1.x到目前最新的2.13.0(这个项目中的版本)都有在项目中使用的案例。它的特点是优雅、简洁、表达力强、自由度高,再加上独特的中间件流程控制,也是典型的洋葱模型,可玩性很高,非常适合我们这种轻量化中间层服务。
说到node开发框架你也可能会想到 eggJs ,thinkJs,用他们岂不是更方便快捷?要知道上述两个底层都是基于koa进行的再次封装,我的建议是 如果你想深入的去学习node,想在开发中去深入了解它,尤其是想自己去开发一些中间件,那koa是不错的选择,当然,前提是你已经具备nodejs相关的知识。
再回到这个项目中,我对这个服务有两个阶段的预期,在第一个阶段会将它职责定位在接管路由(router),为客户端js提供api服务。第二阶段,会考虑基于同构方案的首屏服务端(SSR)渲染。在完成第一阶段时就已经具备上线条件,后续会结合产品需求和seo再去实施SSR。
使用vue来完成H5前端页面的构建是我一直认为最合适的,我个人觉得也没有必要去跟react去做各种的对比,他们各自的优势也非常明显。这里要提到另外一个考量,选择什么样的开发框架是要结合你们团队成员的整体技术水平,对框架的可接受程度,还要结合公司的业务和产品形态。
所以,我的选择是vue,是2.xx的版本,最近刚发了3.0版本,不过还是需要等等再上。
先解释一下,这里的组件库是指的项目中全局通用的如,toast,dialog,loading 等公共组件,我一直的想法是能有公司自己的公共组件库,这个事也是一直推进中,困难重重,这会涉及到跟ui设计师的对接,设计规范的制定,整体风格的统一。到目前已经产出了一些组件,任务道远啊。
上述是我对于这个项目的技术栈的选型,总结下来是:
koaJs:负责中间服务层
vue:负责客户端页面构建
组件库:自研 + 少量开源
webpack:代码构建打包
已经完成了两篇文章的总结,还没看到代码,哈哈,下一篇我会把重点部分的代码实现拿出来跟大家分享,也欢迎一起交流,一起进步,感谢阅读!