脚手架开发

工具

我们团队的前端项目是基于vue和ElementUI进行了一些制定化包装,并加入了一些自己团队设计的模块,可以一步简化后台页面的开发工作,尽管vue提供了一些脚手架工具vue-cli,但由于我们的项目是基于多页面的配置进行开发和打包,与vue-cli生成的项目结构和配置有些不一样,所以创建项目的时候,仍然需要人工去修改很多地方,甚至为了方便,直接从之前的项目copy过来然后进行魔改。表面上看问题不大,但其实存在很多问题:

  • 重复性工作,繁琐而且浪费时间
  • copy过来的模板容易存在无关的代码
  • 项目中有很多需要配置的地方,容易忽略一些配置点
  • 人工操作永远都有可能犯错,新建项目时,总要化时间取排错
  • 内部框架也在不停的迭代,人工建项目往往不知道框架最新的版本号是多少,使用旧版本的框架可以能回重新引入一些bug
基本思路

分析 vue-cli 发现,vue-cli 是将项目模板作为资源独立发布在 git 上,然后在原型的时候将模板下载下来,经过模板引擎渲染,最后生成项目。这样将项目模板与工具分离的目的主要是,项目模板负责项目的结构和依赖配置,脚手架负责项目构建的流程,这两部分分并没有太大的关联,通过分离可以确保这两部分独立维护。假如项目的结构、依赖或者配置有变动,只需要更新项目模板即可。

推荐文章