lowcode-engine code-generatoricejs 方案生成的 React 工程Scaffold Lite 模板结构与使用详解【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine本文聚焦 code-generator 模块中react-app/demo2测试用例的预期产物文档——demo-project/README.md它描述了低代码 Schema 经 icejs 代码生成方案solution落地后所产出的 ice.js React 工程的模板定位Scaffold Lite、启动方式与标准目录结构。读完本文你能完整理解这份 README 在测试夹具体系中的位置、Scaffold Lite 模板的工程配置与目录约定以及 Schema 输入如何通过CodeGenerator的调用链生成该工程并被测试框架比对验证。一、README 的定位测试用例的预期产物说明书这份 README 并不在工程源码目录下而是位于modules/code-generator/tests/fixtures/test-cases/react-app/demo2/测试用例的expected/demo-project/目录中。整个 demo2 用例只有两类输入文件schema.json5低代码项目 Schema输入expected/demo-project/期望生成的完整工程目录输出基线其中 README.md 即是对该工程的说明文档。也就是说这个 README 是code-generator 生成结果的活文档它既是对 Scaffold Lite 模板的官方式说明也是测试框架用来与实际生成产物逐文件比对的基线文件之一。二、Scaffold Lite 模板定位与工程配置2.1 模板定位README 开篇对模板的界定是轻量级模板使用 JavaScript仅包含基础的 Layout。这一描述与生成工程中的 package.json 相互印证originTemplate: alifd/scaffold-lite-js—— 声明工程由 ice.js 官方 lite JS 脚手架初始化iceworks: { type: react, adapter: adapter-react-v3 }与ideMode: { name: ice-react }—— 声明 iceworks/ice 生态适配信息构建脚本start: icejs start、build: icejs build对应 devDependencies 中的ice.js^1.0.0ice.js 1.x 体系UI 依赖锁定alifd/next1.19.18Fusion Design并引入alifd/theme-design-pro主题与ice/store状态管理。2.2 使用方式README 原文命令# 安装依赖 $ npm install # 启动服务 $ npm start # visit http://localhost:3333即npm start启动 ice.js 开发服务后访问http://localhost:3333。除 README 列出的两条命令外package.json 的scripts还提供完整命令集可在实际工程中直接复用{ start: icejs start, build: icejs build, lint: npm run eslint npm run stylelint, eslint: eslint --cache --ext .js,.jsx ./, stylelint: stylelint ./**/*.scss }engines字段声明了运行前提node: 8.0.0。2.3 关键依赖清单依赖版本作用ice.js^1.0.0devDependencyice.js 1.x 构建/CLI 核心提供icejs start/buildalifd/next1.19.18Fusion Design 组件库Button/Form/Input 等alifd/theme-design-pro^0.xFusion 设计主题包ice/store^1.4.3ice.js 官方数据流方案intl-messageformat^9.3.6国际化消息格式化配合工程内 i18n.js 使用alilc/lowcode-datasource-engine^1.0.0低代码数据源引擎支撑运行时数据请求能力loadable/component^5.15.2React 组件按需/异步加载build-plugin-fusion/build-plugin-moment-locales^0.1.xFusion 主题注入、moment 语言包按需构建插件从依赖组合可以推断这套模板在轻量 Layout 之上同时预留了国际化、数据源引擎与组件按需加载三条扩展路径这正是低代码生成页面所需的基础能力面。三、标准目录结构详解继承 README 完整目录树README 给出的标准目录约定含 ice.js 脚手架全部可选目录如下完整保留├── build/ # 构建产物 ├── mock/ # 本地模拟数据 │ ├── index.[j,t]s ├── public/ │ ├── index.html # 应用入口 HTML │ └── favicon.png # Favicon ├── src/ # 源码路径 │ ├── components/ # 自定义业务组件 │ │ └── Guide/ │ │ ├── index.[j,t]sx │ │ ├── index.module.scss │ ├── layouts/ # 布局组件 │ │ └── BasicLayout/ │ │ ├── index.[j,t]sx │ │ └── index.module.scss │ ├── pages/ # 页面 │ │ └── Home/ # home 页面约定路由转成小写 │ │ ├── components/ # 页面级自定义业务组件 │ │ ├── models.[j,t]sx # 页面级数据状态 │ │ ├── index.[j,t]sx # 页面入口 │ │ └── index.module.scss # 页面样式文件 │ ├── configs/ # [可选] 配置文件 │ │ └── menu.[j,t]s # [可选] 菜单配置 │ ├── models/ # [可选] 应用级数据状态 │ │ └── user.[j,t]s │ ├── utils/ # [可选] 工具库 │ ├── global.scss # 全局样式 │ ├── routes.[j,t]s # 路由配置 │ └── app.[j,t]s[x] # 应用入口脚本 ├── build.json # 工程配置 ├── README.md ├── package.json ├── .editorconfig ├── .eslintignore ├── .eslintrc.[j,t]s ├── .gitignore ├── .stylelintignore ├── .stylelintrc.[j,t]s └── [j,t]sconfig.json几点解读目录约定体现了 ice.js 1.x 的约定式路由思想pages/下每个子目录是一个页面约定路由转成小写说明路由 path 由页面目录名推导布局统一收敛在layouts/BasicLayout/与 Scaffold Lite仅包含基础 Layout的定位一致mock/、configs/、models/、utils/等标注为可选按需启用。3.1 对照demo2 实际生成的工程是标准约定的具体子集对照expected/demo-project/的真实文件清单实际生成的工程在标准约定之上是精简落地的并带有低代码生成物特有的附加文件public/index.html应用入口 HTMLsrc/app.js应用入口脚本调用createApp配置rootId: app与router.type: hashsrc/routes.js由 Schema 生成的路由配置BasicLayout作为根组件页面Test挂载在path: /下src/layouts/BasicLayout/基础布局含menuConfig.js菜单配置与Footer、Logo、PageNav三个布局子组件src/pages/Test/由 Schema 中页面testfileName: test生成的页面目录index.jsxindex.css附加文件i18n.js对应 Schema 的i18n字段、constants.js对应 Schema 的constants字段、utils.js以及工程级abc.json、jsconfig.json、tsconfig.json。从源码结构看README 树描述的是模板完整目录空间而生成器只按 Schema 实际用到的能力落文件——Schema 里没有models/mock需求产物中就不会出现这些目录。这种约定空间 按需落地正是模板目录与生成目录产生差异的原因。四、从 Schema 到工程demo2 输入的关键结构schema.json5 是生成该工程的唯一输入其顶层字段与产物文件一一对应Schema 字段内容要点对应产物componentsMap7 个组件声明Button、Button.Group、Input、Form、Form.Item、NumberPicker、Select全部来自alifd/next1.19.18destructuring: true决定package.json依赖与页面 JSX 的 import 方式解构导入componentsTree单页面Pageid: node$1fileName: testmeta.router: /含 state、componentDidMount生命周期、Form 表单树生成src/pages/Test/与src/routes.jsconstantsENV: prod、DOMAIN: xxx.xxx.com生成src/constants.jsi18nzh-CN/en-US两套文案如i18n-jwg27yo4: 你好生成src/i18n.jscss全局样式串body {font-size: 12px;}等并入全局样式configsdkVersion、historyMode: hash、targetRootID、layoutBasicLayoutlogo/name props、themealife/theme-fusion主色#ff9966决定布局组件与路由模式historyMode: hash与app.js中router.type: hash呼应meta应用名demo应用、git_group、project_name: app_demo、spma、creator等工程元信息package.json 描述等以路由生成链路为例Schema 声明layout.componentName: BasicLayout与页面fileName: test产物中 routes.js 即呈现为BasicLayout包裹Test页面的routerConfig数组app.js 中的router.type: hash则来自config.historyMode: hash。输入输出之间的映射关系清晰可验证。五、测试框架如何验证这份 README 所在工程理解这份 README 的完整价值离不开它的宿主——react-app.test.ts。该测试对tests/fixtures/test-cases/react-app/下的每个用例目录demo1、demo2、demo8-datasource-prop、demo9-datasource-engine、demo_10-jsslot 等十余个执行同一套断言流程读取用例目录下的schema.json5作为输入调用生成入口CodeGenerator.solutions.icejs()获取 icejs 方案构建器执行generateProject(schemaJson)得到工程产物通过createDiskPublisher()创建的磁盘发布器publish以projectSlug: demo-project落地到actual目录createProjectFolder: true用 glob 收集**/*.{js,jsx,json,ts,tsx,less,css,scss,sass}文件先断言非空再用expect(caseFullDir).toBeSameFileContents()将actual与expectedREADME 所在目录逐文件内容比对若设置环境变量UPDATE_EXPECTEDtrue则把实际产物回写为expected基线——即expected/demo-project/下的 README、package.json 等文件正是通过这条流程沉淀下来的标准答案。因此对读者而言这份 README 有双重身份既是 Scaffold Lite 工程的使用说明书也是 code-generator 输出稳定性的回归锚点。同目录下 icejs3-app.test.ts、rax-app.test.ts 以相同模式覆盖 ice.js 3.x 与 rax-app 两套方案形成跨方案的生成物基线体系。六、小结与深入路径这份 README 的价值在于它以最小篇幅固化了 icejs 方案生成物的三个关键面——模板定位Scaffold LiteJS 基础 Layout、使用方式npm install/npm start访问http://localhost:3333、目录约定ice.js 1.x 标准结构。结合 demo2 用例可以进一步阅读输入 Schemaschema.json5生成物工程expected/demo-project/package.json、routes.js、app.js验证逻辑react-app.test.ts生成器主体code-generator/src其中solutions/icejs.ts为 icejs 方案入口publisher/disk/为磁盘发布实现。适用前提说明以上内容基于当前仓库的 ice.js 1.x 方案夹具ice.js^1.0.0、alifd/next1.19.18Node 版本要求8.0.0若使用仓库内 ice.js 3.x 或 rax-app 方案产物结构以对应夹具目录为准。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考