想知道这周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的深入内容，可能需要小伙伴自己体验一下尝试一下才能更好的发掘咯，项目地址如下：https://github.com/imcuttle/mometa，如果觉得不错，记得持续关注TJ君的公众号TJ君哦！