💬 ชาวเน็ตแห่แชร์: gitblog /article/details/ - สรุปดราม่าล่าสุด

如何在现有项目中手工引入 lowcode-engine UMD 包并初始化低代码设计器

【免费下载链接】lowcode-engine An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine

如果您不是从零开始搭建低代码项目，而是想把 lowcode-engine 编辑器集成进一个已有的 Web 工程，官方文档接入编辑器提供了两种路径：通过命令行工具 @alilc/create-element 快速创建项目，或手工引入 UMD 包自行配置。本文讲的是第二条路径——在现有项目中通过 UMD 包引入低代码引擎，并调用 init 完成设计器初始化。该方式适合熟悉 Webpack 等构建工具配置的工程师；如果只是想快速体验编辑器，官方更推荐走命令行工具创建 demo 项目。

引入 UMD 包资源

在页面中按下面的顺序引入样式和脚本资源。文档提示：也可以改用异步加载工具，但前提是资源按正确的顺序加载。

<!-- 低代码引擎的页面框架样式 -->
<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>

这里涉及的具体版本：低代码引擎主包 1.0.18、官方扩展 1.0.5、React / React DOM 16.14.0、Fusion Next 1.23.24。文档补充了一个替换说明：如果 unpkg 服务比较缓慢，可以使用官方 CDN 获得确定版本的低代码引擎，例如引擎的 1.0.18 版本对应 https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js。

在 Webpack 中配置 externals

资源既然已经通过 UMD 方式引入，构建工具就不能再把这些依赖打进 bundle。按文档要求，在 webpack 等构建工具中把它们配置为 external：

{
  "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._"
  }
}

这一步是后面初始化能否跑通的关键。官方 FAQ 里记录了典型事故：项目里如果漏配 externals，把 npm 包重复打包进去，运行时会报 VERSION_PLACEHOLDER is not defined，原因是 lowcode-engine 目前只提供 CDN 的使用方式，自己创建的项目遇到该报错基本都是因为把 npm 包打进去了，解决办法就是在项目的 externals 配置里补上对应映射。详见 VERSION_PLACEHOLDER is not defined。

初始化低代码设计器

正确引入后，文档说明可以直接通过 window 上的变量引用，例如 window.AliLowCodeEngine.init。在 <body> 中先放一个 id 为 lce-container 的 <div />，再执行：

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

init 的功能包括但不限于（引自文档）：传递 options 并设置 config 对象；传递 preference 并设置 plugins 入参；初始化 Workbench。

init 的第二个参数是引擎配置项。上面的 enableCondition、enableCanvasLock 只是示例值，完整的可配置项（如 locale、device、renderEnv 等）以及每一项的类型和默认值，可以在 config options 配置列表中查询；其中 locale 默认为 zh-CN，引擎默认支持的 device 类型有 default、mobile、iphonex、iphone6。

可选：TypeScript 项目获得类型推断

如果您的项目使用 TypeScript，文档建议在 package.json 的 devDependencies 中引入类型包，然后在代码里以模块方式调用 init：

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

// src/index.tsx
import { init } from '@alilc/lowcode-engine';

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

注意这并不改变资源加载方式——运行时依赖的仍然是页面上引入的 UMD 包，npm 包只用于类型推断，所以 externals 配置依然不能少。

验证与常见问题

资源是否加载成功：文档给出的判断入口就是 window 上的变量。资源按上述顺序正确引入后，window.AliLowCodeEngine.init 应当可以被直接调用；如果页面报错说该变量不存在，优先核对 <script> 是否遗漏、是否被异步加载打乱了顺序。
VERSION_PLACEHOLDER is not defined：说明构建工具把 npm 包重复打包进去了，回到 externals 配置逐项补齐即可，参见 FAQ。
CDN 拉取缓慢：按文档注释，可切换到官方 CDN 上对应确定版本（如 1.0.18）的资源地址。

编辑器初始化完成后，后续的物料配置、插件扩展等内容属于编辑器的扩展配置范畴，文档将其指向了低代码扩展简述中链接的扩展章节；运行时侧（编辑器产出的资产包数据与 schema 如何交给渲染模块消费）则见接入运行时。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考