《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項目的欄目，包括技術(shù)、學(xué)習(xí)、實用與各種有趣的內(nèi)容。本期推薦的是一個面向研發(fā)的低代碼元編程，代碼可視編輯，輔助編碼工具——mometa。
mometa 定位更多是基于程序員本地開發(fā)的模式，新增了可視化編碼的能力，修改的也是本地的代碼文件本身，它更像是輔助編碼工具，而不是 No-Code (amis/云鳳蝶) 的平臺方案。
它用于解決的問題有：
- 對低代碼平臺不形成依賴，二次開發(fā)可以無縫進(jìn)入代碼開發(fā)模式
- 同時支持所見即所得的可視化編輯，用于提效，提升開發(fā)體驗
- 提供物料生態(tài)，可自定義物料，提升物料使用體驗，提升復(fù)用率
功能特性
- 面向研發(fā)的代碼可視化編輯，直接作用于源碼：
① 響應(yīng)式布局、路由模擬、物料預(yù)覽 ② 反向定位（視圖定位源碼）③ 拖拽插入物料 ④ 拖拽移動 ⑤ 上下移動 ⑥ 刪除 ⑦ 替換 ⑧ 層級選擇
- 開放物料生態(tài)，可定制團(tuán)隊內(nèi)物料庫，見 mometa-mat
- 多語言、多生態(tài)支持，目前暫只支持 React，后續(xù)有計劃支持 Vue
- 接入友好，Webpack>=4 插件化接入
- 開發(fā)友好，物料庫支持熱更新，不破壞已有開發(fā)模式
使用場景
新開發(fā)一個頁面
1、使用團(tuán)隊開發(fā)指令，新增一個空的占位路由 & 頁面
2、進(jìn)入 mometa，查看本地物料，和遠(yuǎn)端物料市場，選中自己需要的物料，直接拖拽，基本成型的頁面布局完成
3、進(jìn)入 ide，完成數(shù)據(jù)聯(lián)調(diào)，數(shù)據(jù)傳遞等，源碼開發(fā)
已有歷史項目，需要迭代功能，只在某一小塊 ui 模塊內(nèi)
1、進(jìn)入 mometa，物料操作插入
2、反向定位直接進(jìn)入 ide 源碼開發(fā)
操作演示
編輯
- 反向定位：支持從視圖定位代碼位置
- 插入物料：可視化插入物料
- 刪除視圖
- 移動視圖
- 編輯代碼
預(yù)覽
- 物料預(yù)覽
- 響應(yīng)式布局
- 路由模擬
如何使用
由于 mometa 依賴本地開發(fā)環(huán)境，只使用在本地開發(fā)環(huán)境，所以沒有搭建在線 demo；在本地開發(fā)的時候可以進(jìn)行使用：
git clone https://github.com/imcuttle/mometa.gitcd mometapnpm installpnpm run start:app:cr # 開啟本地開發(fā)預(yù)覽模式
- 安裝依賴
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ù)結(jié)構(gòu)規(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, // 開啟物料預(yù)覽 experimentalMaterialsClientRender: true }) ]}
注意：使用時，不需要開啟官方預(yù)設(shè)的 react-refresh，mometa 默認(rèn)會開啟 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
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。