零、前言

美团有乐高, 京东有通天塔,阿里有飞冰,大厂都在尝试用自动化工具减少人工,看完这一篇,考虑给你的团队搭建一套自动化开发工具吧!

一、背景

笔者所在公司并非大厂, 发现一些痛点.

1.前端研发跟随业务, 不同部门技术栈五花八门, 同岗位支援困难.( react | vue | seek.js),

2.规范不统一, 跨部门开项目, 编辑器一片红海.standard Airbnb google.

3.组件复用困难, 过程蛮荒, 开发低效.基本停留在翻项目, 找代码, ctrl + c, ctrl + v , 再一通乱改.

二、开发思路

利用基础模板 + 物料(组件) 快速生成项目, 再二次开发

笔者在写react项目时, 用过vscode的插件generateReactComponents, 感觉十分方便, 考虑能不写成一整套耦合业务的组件, 高效复用快速生成项目? 用了大概3个月的闲暇时间做出目前的工具, joao-cli, 可达到如下效果.(录制的公司内部版, 开源版指令为joao)

点击可看joao cli 官网

joao主要用于vue项目, 如果你的项目基于react实现,建议使用阿里官方维护的fusion.design,并且阿里平台已经打通了物料库与UI层.

完成一个脚手架+物料库的大体思路是:

1.首先建立一个空项目

安装部门习惯用的,UI组件库, eslint, 加上业务线自己的工具库,字体库,等等...高度耦合业务即可.

这里笔者以github上的空项目为例, 点我查看

2.建立物料库

再建立一个仓库, 开发人员均可以参与, 固定规范, 维护通用组件, 可以在笔者github项目根目录的material文件夹中查看示例.

这里是物料库,内涵官网代码+物料库代码(物料不多仅供参考)

3.完善模板拉取,物料剥离与安装的工具

这就是joao-cli做的事情, 大家可以尝试用node写一套自己的, 利用commander + git clone可以完成代码拉取,抹掉.git

拉取物料库的物料,不管是components, 还是modules, 利用node的fs进行文件读取.然后安插到新项目的指定位置, 可以通过一些占位符完成私有属性的替换,笔者这里参照vscode的generateReactComponent, 用__className__为预设占位符,替换掉了modules的name.

最后利用git的coreconfig.sparse-checkcout完成物料库指定目录的更新.

由于node内容较多, 这里不再赘述, 这里挖一个坑 以后会完成joao-cli 的node教学,代码其实很简单, 甚至可以说low, 直接看不难.

三、joao-cli一些说明.

    // 安装joao-clinpm install joao-cli -g// 初始化项目joao init// 当前物料查看joao check// 物料库更新(从github物料库拉取)joao update// 组件安装 components 在项目根目录使用joao add -c 名称A 名称B  ...// 模块安装 (页面级内容) 在项目根目录使用joao add -p 随便起个页面名
复制代码

down一个自己玩玩大概就明白怎么回事了.

四、跟阿里飞冰, 美团乐高对比分析

首先笔者在写完此工具后, 去研究了一下大厂的成品项目,

美团乐高的思路好像是跟后端一起工程化, 很棒的思路, 现在掘金也有很多面向接口编程的分析不在赘述.

阿里飞冰想做到大而全,这种工具说穿了就是复用代码, 跟技术栈没什么捆绑,飞冰搞了小程序物料,vue物料, 都是社区帮忙做的, 人多就是力量大啊,而且还用electron写了app,可以说真的想用心做大了. 但是,耦合业务还得靠自己,飞冰自己玩玩够用,中型公司还是自己搞自己的吧.

阿里fusion.design做出了笔者梦中所想,物料库打通UI层,自动生成前端代码,真的棒,可惜笔者项目组全是vue,fusion的官方拥护react, 望洋兴叹, 阿里还是高屋建瓴~.

以上都是本屌丝梦中评价, 白天不负任何责任鸭.~(@^_^@)~

五、这样开发的好与坏

1.增强项目可维护性 统一模板意味着统一技术栈, 统一规范 .

2.增加组件可用性 统一物料库意味着, 维护n套代码与维护1套的差别

3.提升开发效率, 告别复制项目删删删与复制空项目粘粘粘的劳工生涯.

坏处

笔者在自家厂子里都没推动...只能自己干活的时候暗爽...目前觉得最大坏处就是编写物料成本高,毕竟只有自己复用嘛...左手换右手索然无味...

六、碎碎念

随着年龄越来越大, 想分享的欲望也日渐消沉,给自己上次的文章打个广告吧-->像阿里PAI一样搞机器学习平台

最后, 感谢看完.

joao cli 官网