头图

可视化编码!前端无缝接入代码可视化编辑

moyuyc
English

背景

研发提效是亘古不变的话题,提效的基本思路离不开向 标准化、规范化 对齐,后续甚至走向智能化

主流的商业化低代码平台,基本就是希望将研发全链路都推向标准化、规范化,来达到提效的效果,但是对于需求本身是变化的,同时会形成对低代码平台的依赖,后续维护均需要依赖平台能力实现;

所以今天跟大家介绍的不是传统主流的低代码平台,介绍的是面向研发的、代码可视设计编辑平台;它更像是 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,后面会产出文章详细说明如何实现!持续关注

阅读 5.2k

墨鱼碎碎念
包括技术,总结,项目说明,分享等

前端学生

1.1k 声望
259 粉丝
0 条评论

前端学生

1.1k 声望
259 粉丝
文章目录
宣传栏