目标实现类似core绑定自定义卡片渲染的效果。

从0到1开发低代码平台相对耗时间。于是考虑实现阿里的低代码引擎。

低代码引擎 | LowCodeEngine

整体的实现流程：

事实证明是可行。

一些问题

1. react 版本问题：需要webpack + react17.0.2 编译打包。当然也可以直接使用官方的demo（问题就不会那么多了），做二次修改。
2. 代码编辑器插件异常：官方的 @alilc/lowcode-plugin-code-editor 插件使用babel/core 在webpack 5 是存在问题的，所以造轮子基于 recast 、@babel/standalone 实现代码编辑插件。

ai-flow-show/front/src/views/editor/plugins/plugin-code-editor at main · WtecHtec/ai-flow-show

1. 渲染图表的出现报错：

 BizCharts something went wrong:

A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.

这是因为react 使用开发版本的原因，修改：

<script crossorigin="anonymous" src="https://g.alicdn.com/code/lib/react/16.14.0/umd/react.production.min.js"></script>
<script crossorigin="anonymous" src="https://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.production.min.js"></script>

1. 使用自己编译lowcode-renderer 组件时，通过 npm 安装的方式会产生react 版本不兼容的问题。

ai-flow-show/packages/lowcode-renderer at main · WtecHtec/ai-flow-show

使用方式：

// 通过 umd.js 引用
  <script src="./dist/index.umd.js"></script>
  
  // 渲染组件
   const { LowcodeRenderer, React, ReactDOM } = window.LowcodeRenderer;
    ReactDOM.render(
      React.createElement(LowcodeRenderer, {
        projectSchema: {}
      }),
      document.getElementById('root')
    );