前端⼯程化：脚⼿架+物料库快速⽣成新项⽬
零、前⾔
美团有乐⾼, 京东有通天塔，阿⾥有飞冰,⼤⼚都在尝试⽤⾃动化⼯具减少⼈⼯，看完这⼀篇，考虑给你的团队搭建⼀套⾃动化开发⼯具吧!
⼀、背景
笔者所在公司并⾮⼤⼚, 发现⼀些痛点.
1.前端研发跟随业务, 不同部门技术栈五花⼋门, 同岗位⽀援困难.( react | vue | seek.js),
2.规范不统⼀, 跨部门开项⽬, 编辑器⼀⽚红海.standard Airbnb google.
3.组件复⽤困难, 过程蛮荒, 开发低效.基本停留在翻项⽬, 代码, ctrl + c, ctrl + v , 再⼀通乱改.
⼆、开发思路
利⽤基础模板 + 物料(组件) 快速⽣成项⽬, 再⼆次开发
笔者在写react项⽬时, ⽤过vscode的插件generateReactComponents, 感觉⼗分⽅便, 考虑能不写成⼀整套耦合业务的组件, ⾼效复⽤快速⽣成项⽬? ⽤了⼤概3个⽉的闲暇时间做出⽬前的⼯具, joao-cli, 可达到如下效果.(录制的公司内部版, 开源版指令为joao)
joao主要⽤于vue项⽬, 如果你的项⽬基于react实现，建议使⽤阿⾥官⽅维护的fusion.design，并且阿⾥平台已经打通了物料库与UI层.
完成⼀个脚⼿架+物料库的⼤体思路是:
1.⾸先建⽴⼀个空项⽬
安装部门习惯⽤的,UI组件库, eslint, 加上业务线⾃⼰的⼯具库，字体库，等等...⾼度耦合业务即可.
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-cli
npm 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.提升开发效率, 告别复制项⽬删删删与复制空项⽬粘粘粘的劳⼯⽣涯.
小程序开发一键生成平台源码
坏处
笔者在⾃家⼚⼦⾥都没推动...只能⾃⼰⼲活的时候暗爽...⽬前觉得最⼤坏处就是编写物料成本⾼，毕竟只有⾃⼰复⽤嘛...左⼿换右⼿索然⽆味...
六、碎碎念
随着年龄越来越⼤, 想分享的欲望也⽇渐消沉，给⾃⼰上次的⽂章打个⼴告吧-->
最后, 感谢看完.