ant design pro集成阿里低代码引擎lowcode-engine，并实现与数据库结合实现低代码模块的创建、设计、发布等功能

frankch

已于 2024-02-20 16:59:07 修改

阅读量4.6k

点赞数 34

分类专栏：低代码文章标签：低代码 react

于 2024-02-03 18:06:27 首次发布

本文链接：https://blog.csdn.net/frankch/article/details/136009792

版权

ant design pro集成阿里低代码引擎

阿里低代码引擎是一款为低代码平台开发者提供的，具备强大定制扩展能力的低代码设计器研发框架。

本文主要介绍如何在ant design pro项目中集成阿里低代码引擎lowcode-engine。
根据官方文档，已有项目要集成低代码引擎，至少需要三步，以下我们以ant desigin pro5项目为例，来集成低代码引擎。

ant desigin pro项目的创建可以根据官方网站进行创建

引入 UMD 包资源

找到项目中的src/pages/document.ejs文件，添加如下内容

<!-- 低代码引擎的页面框架样式 -->
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/css/engine-core.css" />
<!-- Fusion Next 控件样式 -->
<link rel="stylesheet" href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css">
<!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css">
<!-- 低代码引擎官方扩展的样式 -->
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css" />

<!-- React，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react/16.14.0/umd/react.development.js"></script>
<!-- React DOM，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.development.js"></script>
<!-- React 向下兼容，预防物料层的依赖 -->
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
<!-- lodash，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<!-- 日期处理包，Fusion Next 的依赖 -->
<script src="https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js"></script>
<!-- Fusion Next 的主包，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<!-- 低代码引擎的主包 -->
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js"></script>
<!-- 低代码引擎官方扩展的主包 -->
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js"></script>

配置打包

因为这些资源已经通过 UMD 方式引入，所以在 webpack 等构建工具中需要配置它们为 external，不再重复打包
找到项目config/config.ts配置文件，添加如下内容

"externals": {
   
    "react": "var window.React",
    "react-dom": "var window.ReactDOM",
    "prop-types": "var window.PropTypes",
    "@alifd/next": "var window.Next",
    "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
    "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
    "moment": "var window.moment",
    "lodash": "var window._"
  }

初始化低代码编辑器

正确引入后，我们可以直接通过 window 上的变量进行引用，如 window.AliLowCodeEngine.init。您可以直接通过此方式初始化低代码引擎

// 确保在执行此命令前，在 <body> 中已有一个 id 为 lce-container 的 <div />
window.AliLowCodeEngine.init(document.getElementById('lce-container'), {
   
  enableCondition: true,
  enableCanvasLock: true,
});

如果您的项目中使用了 TypeScript，您可以通过如下 devDependencies 引入相关包，并获得对应的类型推断。

// package.json
{
   
  "devDependencies": {
   
    "@alilc/lowcode-engine": "^1.0.0"
  }
}

import {
    init } from '@alilc/lowcode-engine';

init(document.getElementById('lce-container'), {
   
  enableCondition: true,
  enableCanvasLock: true,
}

最低0.47元/天解锁文章