面向研發(fā)的、代碼可視設計編輯平臺mometa（可視化代碼編輯器）

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

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

它用于解決的問題有：

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

功能特性

• 面向研發(fā)的代碼可視化編輯，直接作用于源碼：

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

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

使用場景

新開發(fā)一個頁面

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

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

3、進入 ide，完成數(shù)據(jù)聯(lián)調(diào)，數(shù)據(jù)傳遞等，源碼開發(fā)

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

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

2、反向定位直接進入 ide 源碼開發(fā)

操作演示

編輯

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

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

• 刪除視圖

• 移動視圖

• 編輯代碼

預覽

• 物料預覽

• 響應式布局

• 路由模擬

如何使用

由于 mometa 依賴本地開發(fā)環(huán)境，只使用在本地開發(fā)環(huán)境，所以沒有搭建在線 demo；在本地開發(fā)的時候可以進行使用：

git clone https://github.com/imcuttle/mometa.gitcd mometapnpm installpnpm run start:app:cr # 開啟本地開發(fā)預覽模式

• 安裝依賴

npm i @mometa/editor -D

• 使用 antd 物料

1、安裝 antd 物料

npm i @mometa-mat/antd -D

2、在項目根目錄中創(chuàng)建 mometa-material.config.js

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

你也可以創(chuàng)建自己的物料庫，數(shù)據(jù)結構規(guī)則見 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開源協(xié)議，更多內(nèi)容大家可自行前往閱讀。

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