create-ts-entry-point 是 PrestaShop 仓库中提供的一个技能,用于为新后台管理页面创建 TypeScript 入口文件。其说明要求先阅读 @.ai/Component/Javascript/CONTEXT.md,以了解页面结构和 webpack 配置。
一、目录结构 在 admin-dev/themes/new-theme/js/pages/{domain}/ 下创建目录,包含:index.ts(列表页入口)、form.ts(简单表单页入口),或 form/index.ts(复杂表单页入口,带子文件)、以及 {domain}-map.ts(DOM 选择器映射,可选,用于选择器较多的页面)。说明指出,简单页面仅有 index.ts 和 form.ts 即可,只有真正复杂的页面才创建子目录和管理类。
二、列表入口(index.ts) 初始化 Grid 实例并添加扩展。扩展的完整列表和模式参见 init-grid-extensions 技能。可参考 admin-dev/themes/new-theme/js/pages/tax/index.ts(简单示例)和 admin-dev/themes/new-theme/js/pages/manufacturer/index.ts(多个 grid 示例)。
三、表单入口(form.ts 或 form/index.ts) 初始化表单所需的全局组件。完整组件列表和使用方式参见 init-js-components 技能。简单表单只需几次 initComponents 调用;带 Vue 区块的复杂表单参见 create-vue-integration 技能。可参考 admin-dev/themes/new-theme/js/pages/attribute/form/index.ts(简单表单示例)。
四、Webpack 注册 在 admin-dev/themes/new-theme/.webpack/common.js 的 entry 中添加入口点:{domain}: './js/pages/{domain}';(列表)与 {domain}_form: './js/pages/{domain}/form';(表单,如单独存在)。输出为 admin-dev/themes/new-theme/public/{domain}.bundle.js。Twig 模板必须通过 script 标签引入该 bundle,参见 create-twig-index-template / create-twig-form-template。
五、规则 入口点必须在 webpack 中注册,未注册的文件不会被编译;new Grid('{domain}') 中的 Grid ID 必须与 PHP grid 定义中的 GRID_ID 匹配;对于简单页面,入口点本身就是逻辑,管理类仅用于复杂页面。