實時輸出前端原始碼，折騰大半年的開源專案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讓更多人體驗使用，歡迎關注交流，任何合理理性的想法都可以討論探索並付諸實踐，創作不易，感謝支援！