面向研發的低程式碼、程式碼視覺化設計編排

moyuyc發表於2021-12-31
視覺化

背景

研發提效是亙古不變的話題，提效的基本思路離不開向 標準化、規範化 對齊，後續甚至走向智慧化。

主流的商業化低程式碼平臺，基本就是希望將研發全鏈路都推向標準化、規範化，來達到提效的效果，但是對於需求本身是變化的，同時會形成對低程式碼平臺的依賴，後續維護均需要依賴平臺能力實現；

所以今天跟大家介紹的不是傳統主流的低程式碼平臺，介紹的是面向研發的、程式碼可視設計編輯平臺；它更像是 dreamweaver、gui 可視編輯 之於 程式設計師。

它用於解決的問題有：

  1. 對低程式碼平臺不形成依賴，二次開發可以無縫進入程式碼開發模式
  2. 同時支援所見即所得的可視編輯，用於提效，提示開發體驗
  3. 提供物料生態，可自定義物料，提升物料使用體驗，提升複用率

方案說明

image.png

功能 & 特性

編輯

反向定位

支援從檢視定位程式碼位置
mometa-locate.gif

插入物料

視覺化插入物料
mometa-insert-material.gif

刪除檢視

mometa-delete.gif

移動檢視

mometa-move.gif

編輯程式碼

mometa-edit.gif

預覽

路由隔離

單頁應用中的路由跳轉能夠進行攔截控制，其他和正常預覽保持一致

mometa-preview-url.gif

如何使用

安裝依賴

npm i @mometa/editor -D

使用 antd 物料

  1. 安裝 antd 物料
npm i @mometa/materials-generator @mometa-mat/antd -D
  1. 在專案根目錄中建立 mometa-material.config.js
const { resolveLibMatConfig } = require('@mometa/materials-generator')

module.exports = [resolveLibMatConfig('antd')]

你也可以建立自己的物料庫，資料結構規則見 Material 定義

接入編輯器

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-refresh，mometa 預設會開啟 react-refresh 能力

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

提供的例子可見 @mometa/app

其他

完整開源實現見 mometa，請不要吝嗇你的點贊與star，後面會產出文章詳細說明如何實現！持續關注

相關文章