如何在现有项目中手工引入 lowcode-engine UMD 包并初始化低代码设计器【免费下载链接】lowcode-engineAn 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 relstylesheet hrefhttps://uipaas-assets.com/prod/npm/alilc/lowcode-engine/1.0.18/dist/css/engine-core.css / !-- Fusion Next 控件样式 -- link relstylesheet hrefhttps://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css !-- 低代码引擎的页面主题样式可以替换为 theme-lowcode-dark -- link relstylesheet hrefhttps://alifd.alicdn.com/npm/alifd/theme-lowcode-light/0.2.0/next.min.css !-- 低代码引擎官方扩展的样式 -- link relstylesheet hrefhttps://uipaas-assets.com/prod/npm/alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css / !-- React可替换为 production 包 -- script srchttps://g.alicdn.com/code/lib/react/16.14.0/umd/react.development.js/script !-- React DOM可替换为 production 包 -- script srchttps://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.development.js/script !-- React 向下兼容预防物料层的依赖 -- script srchttps://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js/script script srchttps://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js/script !-- lodash低代码编辑器的依赖 -- script srchttps://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js/script !-- 日期处理包Fusion Next 的依赖 -- script srchttps://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js/script !-- Fusion Next 的主包低代码编辑器的依赖 -- script srchttps://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js/script !-- 低代码引擎的主包 -- script crossoriginanonymous srchttps://uipaas-assets.com/prod/npm/alilc/lowcode-engine/1.0.18/dist/js/engine-core.js/script !-- 低代码引擎官方扩展的主包 -- script crossoriginanonymous srchttps://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 DOM16.14.0、Fusion Next1.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 如何交给渲染模块消费则见 接入运行时。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何在现有项目中手工引入 lowcode-engine UMD 包并初始化低代码设计器
如何在现有项目中手工引入 lowcode-engine UMD 包并初始化低代码设计器【免费下载链接】lowcode-engineAn 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 relstylesheet hrefhttps://uipaas-assets.com/prod/npm/alilc/lowcode-engine/1.0.18/dist/css/engine-core.css / !-- Fusion Next 控件样式 -- link relstylesheet hrefhttps://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css !-- 低代码引擎的页面主题样式可以替换为 theme-lowcode-dark -- link relstylesheet hrefhttps://alifd.alicdn.com/npm/alifd/theme-lowcode-light/0.2.0/next.min.css !-- 低代码引擎官方扩展的样式 -- link relstylesheet hrefhttps://uipaas-assets.com/prod/npm/alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css / !-- React可替换为 production 包 -- script srchttps://g.alicdn.com/code/lib/react/16.14.0/umd/react.development.js/script !-- React DOM可替换为 production 包 -- script srchttps://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.development.js/script !-- React 向下兼容预防物料层的依赖 -- script srchttps://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js/script script srchttps://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js/script !-- lodash低代码编辑器的依赖 -- script srchttps://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js/script !-- 日期处理包Fusion Next 的依赖 -- script srchttps://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js/script !-- Fusion Next 的主包低代码编辑器的依赖 -- script srchttps://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js/script !-- 低代码引擎的主包 -- script crossoriginanonymous srchttps://uipaas-assets.com/prod/npm/alilc/lowcode-engine/1.0.18/dist/js/engine-core.js/script !-- 低代码引擎官方扩展的主包 -- script crossoriginanonymous srchttps://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 DOM16.14.0、Fusion Next1.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 如何交给渲染模块消费则见 接入运行时。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
