@formily/designable-antd

Install

npm install --save @formily/designable-antd

使用步骤

复制文件

复制 packages 目录下 core、react、react-settings-form、shared 包里的 esm 目录文件

渲染和设计器都需要

复制 formily 目录下 antd、setters、transformer 包里的 esm 目录文件

设计器页面需要

文件放置目录可参考以下结构 /src/packages/designable 放 packages 下的所有包文件 /src/packages/formily 放 formily 下的所有包文件

修改 vite.config 、 tsconfig 和 eslint.config 配置文件

vite.config 修改 alias 配置

{
    resolve: {
      alias: {
        '@': '/src',
        '@formily-design/react': '/src/packages/designable/react',
        '@formily-design/react-settings-form': '/src/packages/designable/react-settings-form',
        '@formily-design/core': '/src/packages/designable/core',
        '@formily-design/shared': '/src/packages/designable/shared',
        '@formily-design/formily-setters': '/src/packages/formily/setters',
        '@formily-design/formily-transformer': '/src/packages/formily/transformer',
        '@formily-design/formily-antd': '/src/packages/formily/antd',
      },
    },
}

tsconfig 修改 paths 配置

{
  "paths": {
    "@/*": ["src/*"],
    "@formily-design/react": ["src/packages/designable/react"],
    "@formily-design/react-settings-form": [
      "src/packages/designable/react-settings-form"
    ],
    "@formily-design/core": ["src/packages/designable/core"],
    "@formily-design/shared": ["src/packages/designable/shared"],
    "@formily-design/formily-transformer": ["src/packages/formily/transformer"],
    "@formily-design/formily-antd": ["src/packages/formily/antd"]
  }
}

eslint.config 忽略 packages 目录下文件的校验

export default tseslint.config(
  { ignores: ['dist', '.claude/', '**/packages/**'] },
  { settings: {}, extends: [] }
  ......
)

安装依赖

复制代码到其他项目后，还需要安装以下内部依赖包

{
  "dependencies": {
    "@babel/parser": "^7.29.0",
    "@formily/antd-v5": "^1.2.4",
    "@formily/core": "^2.3.7",
    "@formily/json-schema": "^2.3.7",
    "@formily/path": "^2.3.7",
    "@formily/react": "^2.3.7",
    "@formily/reactive": "^2.3.7",
    "@formily/reactive-react": "^2.3.7",
    "@formily/shared": "^2.3.7",
    "@juggle/resize-observer": "^3.4.0",
    "@monaco-editor/loader": "^1.7.0",
    "@monaco-editor/react": "^4.7.0",
    "dateformat": "^5.0.3",
    "jsonp": "^0.2.1",
    "react-color": "^2.19.3",
    "requestidlecallback": "^0.3.0",
    "tlbs-map-react": "^1.1.1"
  },
  "devDependencies": {
    "@types/jsonp": "^0.2.3"
  }
}

版本可以尝试最新版本，以上版本是可正常使用的版本