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

前言

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

远景

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

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

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

介绍

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

展示 1

展示 2

物料

提供多种类型的物料源，以此来满足不同场景下的需求。

• 组件：vue element-ui 基础组件
• 容器：存储基础组件
• 编辑区块：可增删改可编辑的特定场景代码片段
• 静态区块：代码片段
• 搜索组件：官方内置拥有特定逻辑组件
• 插件：第三方自定义组件

使用示例如下：

示例 1:

示例 2:

更多功能感兴趣可自行体验。

基础功能

• 实时预览
• 拖拽
• 实时预览源代码
• 组件: 复制
• 组件: 删除
• 组件: 配置
• 撤销
• 保存
• 导出
• 重置
• 接口生成
• 打开 vscode 展示代码
• 文本编辑
• 等等功能

生产代码示例

以下链接为使用 sparrow-js 生成的未经任何修改的源代码;

https://github.com/sparrow-js/sparrow/blob/master/packages/sparrow-server/src/app/view/template/index.vue

快速使用

全局安装

# 全局安装
$ npm install -g sparrow-code

# 运行
$ sparrow

项目内安装

# 项目内安装
$ npm install sparrow-code -D

# package.json 增加 sparrow
"scripts": {
  "sparrow": "sparrow start -m page"
}

# 项目内安装 GUI 组件
$ npm install @sparrow-vue/develop-ui -S

# 项目内引用 App.vue
<template>
  <div id="app">
    <router-view />
    <sparrow />
  </div>
</template>

<script>
import Sparrow from '@sparrow-vue/develop-ui'

export default {
  components: {
    Sparrow
  },
  name: 'App'
}
</script>

开源地址

git 地址：https://github.com/sparrow-js/sparrow

总结

功能正在按既定规划由想法一步步落地，使用体验、文档也在逐步优化解决，目前完全由个人业余时间开发，正在努力使 sparrow-js 让更多人体验使用，欢迎关注交流，任何合理理性的想法都可以讨论探索并付诸实践，创作不易，感谢支持！