1-生成初始项目代码

前提条件

• Node.js version 10.3.0 or later

开始

全局安装脚手架工具

npm install -g yo
npm i -g @mendix/generator-widget

生成初始项目代码

替换 {your-widget-name} 成你想要的组件名称

yo @mendix/widget {your-widget-name}

? What is the name of your widget MyWidgetName
? Enter a description for your widget My widget description
? Organization name Mendix
? Add a copyright 2020 Mendix Technology BV
? Add a license Apache-2.0
? Initial version 1.0.0
? Author John
? Mendix project path ./tests/testProject
? Which programming language do you want to use for the widget? TypeScript
? Which type of widget are you developing? For web and hybrid mobile apps
? Which template do you want to use for the widget? Empty widget (recommended for more experienced developers)
? Add unit tests for the widget ? (recommended for Full Boilerplate) No
? Add End-to-end tests for the widget ? (recommended for Full Boilerplate) No\

2-初始代码说明

dist

dist/{version}/{packagePath}.{widgetName}.mpk

npm run build 生产模式下构建前端组件最终产物

dist/tmp/widgets

npm run start 开发模式下编译产生的文件

src

源代码目录

src/ui

样式文件目录

src/package.xml

组件包声明文件

src/{widgetName}.xml

组件接口声明文件，声明文件用于mendix studio或者mendix studio pro中此组件的属性对话需要最终开发者指定，如下图

src/{widgetName}.editorConfig.ts

mendix studio或者mendix studio pro 中Structure mode显示内容

src/{widgetName}.editorPreview.ts

mendix studio pro 中Design mode显示的内容(mendix studio没有Design mode)

src/{widgetName}.tsx

组件主入口，在此处完成 mendix api 的数据提取和事件分发。

src/components/

此目录下的 react 组件不应该含有 mendix api，也就是说隔离 mendix。它们理论上应该和 mendix 没有任务关系。

src/typings/{widgetName}.d.ts

@mendix/pluggable-widgets-tools根据src/{widgetName}.xml生成的 typescript typing 文件

3-package说明

npm run start

• 编译组件项目代码，把生成的文件放入 dist/{version}/tmp/widgets/和 mendix 测试项目tests/testProject/deployment/web/widgets/
• zip 压缩dist/{version}/tmp/widgets/到 dist/{version}/{packagePath}.{widgetName}.mpk和tests/testProject/widgets/{packagePath}.{widgetName}.mpk
• 当源代码文件变化时重复上述活动并通知 mendix 测试项目刷新页面

npm run build

• 编译组件项目代码，把生成的文件放入 dist/{version}/tmp/widgets/和 mendix 测试项目tests/testProject/deployment/web/widgets/
• zip 压缩dist/{version}/tmp/widgets/到 dist/{version}/{packagePath}.{widgetName}.mpk和tests/testProject/widgets/{packagePath}.{widgetName}.mpk
• 只运行一次

4-FAQ

代码未更新

Q

当我修改代码保存后，页面刷新，但没有产生预期的行为

A

因为浏览器缓存的原因，最新的代码没有下载。解决方法是打开开发者模式，勾选disable cache并全程保持 devtool 打开状态。