前端工程化: 脚手架+物料库快速生成新项目

零、前言

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

1、背景

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

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

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

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

2、开发思路

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

笔者在写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, 直接看不难.

3、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一个本身玩玩大概就明白怎么回事了.

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

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

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

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

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

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

5、这样开发的好与坏

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

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

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

坏处

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

6、碎碎念

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

最后, 感谢看完.

joao cli 官网