实时输出前端源代码，折腾大半年的开源项目sparrow-js

前言

sparrow-js第一次提交到git是在2019-12，转眼将近一年时间，一直在坚持更新，唯一目标就是提升前端研发效率，几年前在市场加速数字化的背景下开始关注前端研发效率这块儿的东西，最开始在前公司内部开发了一个工程化方面的前端项目，大体做了两方面工作1.前端工程搭建接入各种插件、公司内部服务。2.按照原子设计理论搭建物料体系。在搭建这个项目时产生了很多新灵感，去年年底决定将想法开始付诸实践所以就有了sparrow-js这个开源项目，这个项目更侧重于解决业务开发部分的前端效率提升，直接输出源代码。

远景

最初设想的有三大块功能：

• 本地低代码搭建，常规开发模式还是在本地开发，所以实现了一个本地可视化搭建工具，实时输出源代码。
• online低代码搭建，线上化的可视化搭建更利于传播，更方便。
• 数据采集，包括各种数据收集：如图片、sketch设计稿类智能生成代码等，swagger等接口管理工具数据生成接口代码。

目前本地低代码搭建已经完成一期的功能，可实现实时输出可读的Vue源代码，下面会做介绍。下一步大方向除了本地低代码项目的迭代外将开始实现online版的sparrow-js，最后实现数据采集转化为源代码，最终达到秒级前端需求开发（部分场景下），达成前端提效目标。

介绍

sparrow-js 提供丰富的物料来帮助开发者提效，目前生成的源代码是vue，element-ui的代码，提供函数级别代码搭建能力，可以注入逻辑代码。界面展示如下图：

展示1

<