/formily-form-builder

formily表单设计器案例

Primary LanguageJavaScript

formily-form-builder

说明

Formily表单设计器是基于 designable 而扩展出来的扩展包,它在继承了 designable 的基础能力上,提供了 Formily 基础表单的搭建和配置能力,本项目提供了一个可运行的 demo并内置一些简单的自定义控件,可以直接在本地运行。

项目结构

├── modules                    --- 本地包依赖目录,注意需要在 package-lock.json 和 yarn.lock 中同步固定
│   └── @monaco-editor-react
├── src
│   ├── .umi                   --- umi临时目录
│   └── pages                  --- 路由文件夹
│        └── home
│             ├── service      --- schema 保存与加载逻辑
│             ├── source       --- 核心资源文件夹,主要包含表单控件、控件相关schema、控件相关locales以及一些创建控件所需的逻辑等
│             ├── widgets      --- 控件目录,包括顶部按钮、logo、Markup-tab、Preview-tab、Schema-tab等
│             └── index        --- 表单设计器展示页
├── .umirc.js                  --- umi配置文件
├── package.json
├── package-lock.json
├── yarn.lock
└── README.md

注意

在某些 webpack 版本和配置中,可能会出现编译 @monaco-editor/react 包失败报错的情况,这是因为 @designable/react-settings-form 包依赖了 @monaco-editor/react 包,而后者的 es 编译版本过高出现一些高级语法导致的,这个问题可以通过配置 webpack 的 loader 选项进行配置。 如果上述方法无效,则可以通过手动打包 @monaco-editor/react 包并将打包结果放置到本地进行加载解决,同时要去修改 package-lock.json 或 yarn.lock 固定住包对包的依赖关系:

...
file: modules/@monaco-editor-react
...

项目的 modules目录里放置了 4.x 版本的 @monaco-editor/react 包的 es 低版本的编辑包,可以自行引用。