想知道这周GitHub上趋势榜周排名第一的是什么项目吗？
就是这款 面向研发的低代码元编程，代码可视编辑，辅助编码工具
mometa
现在市面上低代码开发工具有很多，但是mometa可能和大多数此类工具不一样，mometa对于吾等程序员来说，在概念上更像一个美工使用dreamweaver的感觉。
来先看看mometa的主要五大特点：
-
面向研发的代码可视化编辑
-
可定制团队内物料库
-
多语言、多生态支持，目前暂只支持 React，后续有计划支持 Vue
-
接入友好，Webpack>=4 插件化接入
-
开发友好，物料库支持热更新，不破坏已有开发模式
按作者的说法，mometa 是在基于本地开发的的基础上，新增了可视化编码的能力，所以它不是说你一点代码都不需要懂，而是在你懂代码的基础上，更好的辅助你提升效率，这样解释其定位似乎更合适。
实际的使用界面如下：
使用者也不用担心对低代码平台会形成依赖，二次开发可以无缝进入代码开发模式。
小伙伴们肯定接着好奇，怎么无缝接入呢？
那我们要说说下面两种情况：
就是如果只是从头开始全新的开发，其实就三个步骤。
-
1、使用团队开发指令，新增一个空的占位路由 & 页面
-
2、进入 mometa，查看本地物料，和远端物料市场，选中自己需要的物料，直接拖拽，基本成型的页面布局完成
-
3、进入 ide，完成数据联调，数据传递等，源码开发
但是如果是对已经存在的功能进行优化，只需要：
-
1、进入 mometa，物料操作插入
-
2、反向定位直接进入 ide 源码开发
这里所说的反向定位是指支持从视图定位代码位置，就像这样：
下面TJ君再来教你如何快速上手，先下载相关代码：
pnpm install pnpm run start:app:cr # 开启本地开发预览模式安装依赖
npm i @mometa/editor -D安装 antd 物料
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，记住哦
然后，启动 webpack dev server，开启 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: 'raw text', // 以及其他数据 }} > <h1 __mometa={{...}}>Title</h1> {list.map((text, i) => ( <p __mometa={{...}} key={i}>{text}</p> ))} </div> ) }更多关于mometa的深入内容，可能需要小伙伴自己体验一下尝试一下才能更好的发掘咯，那么项目的地址在这里：
点击下方卡片，关注公众号“TJ君”
回复“mometa”，获取仓库地址
关注我，每天了解一个牛x、好用、有趣的东东
原文链接：https://blog.csdn.net/j3T9Z7H/article/details/122694208
