面向研發的、代碼可視設計編輯平台mometa

2022-01-24 00:15 ·GitHub精選

《開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個面向研發的低代碼元編程，代碼可視編輯，輔助編碼工具——mometa。

 

 

mometa 定位更多是基於程序員本地開發的模式，新增了可視化編碼的能力，修改的也是本地的代碼文件本身，它更像是輔助編碼工具，而不是 No-Code (amis/雲鳳蝶) 的平台方案。

它用於解決的問題有：

• 對低代碼平台不形成依賴，二次開發可以無縫進入代碼開發模式
• 同時支持所見即所得的可視化編輯，用於提效，提升開發體驗
• 提供物料生態，可自定義物料，提升物料使用體驗，提升復用率

 

功能特性

•  面向研發的代碼可視化編輯，直接作用於源碼：

① 響應式布局、路由模擬、物料預覽 ② 反向定位（視圖定位源碼）③ 拖拽插入物料 ④ 拖拽移動 ⑤ 上下移動 ⑥ 刪除 ⑦ 替換 ⑧ 層級選擇

•  開放物料生態，可定制團隊內物料庫，見 mometa-mat
•  多語言、多生態支持，目前暫只支持 React，后續有計划支持 Vue
•  接入友好，Webpack>=4 插件化接入
•  開發友好，物料庫支持熱更新，不破壞已有開發模式

 

使用場景

新開發一個頁面

1、使用團隊開發指令，新增一個空的占位路由 & 頁面

2、進入 mometa，查看本地物料，和遠端物料市場，選中自己需要的物料，直接拖拽，基本成型的頁面布局完成

3、進入 ide，完成數據聯調，數據傳遞等，源碼開發

已有歷史項目，需要迭代功能，只在某一小塊 ui 模塊內

1、進入 mometa，物料操作插入

2、反向定位直接進入 ide 源碼開發

 

操作演示

編輯

• 反向定位：支持從視圖定位代碼位置

 

• 插入物料：可視化插入物料

 

• 刪除視圖

 

• 移動視圖

 

• 編輯代碼

 

---

預覽

• 物料預覽

 

• 響應式布局

 

• 路由模擬

 

如何使用

由於 mometa 依賴本地開發環境，只使用在本地開發環境，所以沒有搭建在線 demo；在本地開發的時候可以進行使用：

git clone https://github.com/imcuttle/mometa.git cd mometa pnpm install pnpm run start:app:cr # 開啟本地開發預覽模式

• 安裝依賴

npm i @mometa/editor -D

• 使用 antd 物料

1、安裝 antd 物料

npm i @mometa-mat/antd -D

2、在項目根目錄中創建 mometa-material.config.js

module.exports = [require('@mometa-mat/antd').default]

你也可以創建自己的物料庫，數據結構規則見 Material 定義：
https://github.com/imcuttle/mometa/blob/master/packages/materials-generator/src/types.ts

• 接入編輯器

webpack.config.js 修改如下：

const MometaEditorPlugin = require('@mometa/editor/webpack') module.exports = { module: { rules: [ { test: /\.(js|mjs|jsx|ts|tsx)$/, // 注意，只需要處理你需要編輯的文件目錄 include: paths.appSrc, loader: require.resolve('babel-loader'), options: { plugins: [isEnvDevelopment && require.resolve('@mometa/editor/babel/plugin-react')] } } ] }, plugins: [ isEnvDevelopment && new MometaEditorPlugin({ react: true, // 開啟物料預覽 experimentalMaterialsClientRender: true }) ] }

注意：使用時，不需要開啟官方預設的 react-refresh，mometa 默認會開啟 react-refresh 能力

啟動 webpack dev server，開啟 http://localhost:${port}/mometa/ 即可

提供的例子可見：
https://github.com/imcuttle/mometa/tree/master/packages/app

 

 

此項目使用MIT開源協議，更多內容大家可自行前往閱讀。

開源地址：https://github.com/imcuttle/mometa