mometa：面向研发的低代码元编程工具

mometa介绍

mometa是一款面向研发的低代码元编程工具，它具有可视化编辑、可定制、团队内物料库等多个特点。虽然市面上低代码开发工具有很多，但是mometa对于吾等程序员来说，在概念上更像一个美工使用dreamweaver的感觉。

主要特点

• 面向研发的代码可视化编辑
• 可定制团队内物料库
• 多语言、多生态支持，目前暂只支持React，后续有计划支持Vue接入
• 友好，Webpack>=4插件化接入开发友好
• 物料库支持热更新，不破坏已有开发模式

按作者的说法，mometa是在基于本地开发的基础上，新增了可视化编码的能力，所以它不是说你一点代码都不需要懂，而是在你懂代码的基础上，更好的辅助你提升效率，这样解释其定位似乎更合适。

实际的使用界面如下：

使用者也不用担心对低代码平台会形成依赖，二次开发可以无缝进入代码开发模式。

小伙伴们肯定接着好奇，怎么无缝接入呢？那我们要说说下面两种情况：

1. 如果只是从头开始全新的开发，其实就三个步骤。
1. 使用团队开发指令，新增一个空的占位路由&页面
2. 进入mometa，查看本地物料，和远端物料市场，选中自己需要的物料，直接拖拽，基本成型的页面布局完成
3. 进入ide，完成数据联调，数据传递等，源码开发
2. 如果是对已经存在的功能进行优化，只需要：
1. 进入mometa，物料操作插入
2. 反向定位直接进入ide源码开发

这里所说的反向定位是指支持从视图定位代码位置。

如何快速上手

先下载相关代码：

pnpm install
pnpm run start:app:cr #开启本地开发预览模式

安装依赖：

npm i @mometa/editor -D
npm i @mometa-mat/antd -D

在项目根目录中创建mometa-material.config.js：

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

接入编辑器，修改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，记住哦。

然后，启动webpackdevserver，开启http://localhost:${port}/mometa/就可以了。

有了这个是不是一下子觉得编码更容易了呢？

小伙伴们可能还想知道mometa实现的原理，TJ君简单和大家一起探讨下。一个就是React的实现，对于下面这段React应用代码：

function App() {
  const [list] = React.useState(['p1', 'p2'])
  return (
    <div>
      <h1>Title</h1>
      {list.map((text, i) => (
        <p key={i}>{text}</p>
      ))}
    </div>
  )
}

ReactDOM.render(<App />, window.root)

可以通过babel插件babel/plugin-react，编译时注入JSX的元信息__mometa至props中，包括colNumber,lineNumber,filename等；这一步骤就是在编译时提前注入代码元数据。

function App() {
  const [list] = React.useState(['p1', 'p2'])
  return (
    <div __mometa={{ start: { line: 5, column: 4 }, end: { line: 10, column: 4 }, filename: '/App.tsx', name: 'div', text: 'rawtext',//以及其他数据}}>
      <h1 __mometa={{...}}>Title</h1>
      {list.map((text, i) => (
        <p __mometa={{...}} key={i}>{text}</p>
      ))}
    </div>
  )
}

更多关于mometa的深入内容，可能需要小伙伴自己体验一下尝试一下才能更好的发掘咯，那么项目的地址在这里：https://github.com/imcuttle/mometa