Formily-Schema-Editor 使用教程

Formily-Schema-Editor 使用教程

formily-editorSchemaEditor项目地址:https://gitcode.com/gh_mirrors/fo/formily-editor

1. 项目的目录结构及介绍

Formily-Schema-Editor 的目录结构如下：

formily-editor/
├── docs/
│   └── zh-cn/
├── packages/
│   ├── editorconfig
│   ├── eslintignore
│   ├── eslintrc
│   ├── gitignore
│   ├── prettierrc.js
│   ├── umirc.js
│   ├── LICENSE.md
│   ├── lerna.json
│   ├── package.json
│   ├── README.md
│   └── tsconfig.json
├── umi.js
└── README.md

目录结构介绍

• docs/: 包含项目文档，特别是中文文档。
• packages/: 包含项目的各种配置文件和核心代码。
  • editorconfig, eslintignore, eslintrc, gitignore: 编辑器和代码风格配置文件。
  • prettierrc.js, umirc.js: 代码格式化和项目配置文件。
  • LICENSE.md, lerna.json, package.json, README.md, tsconfig.json: 项目许可证、多包管理配置、项目依赖和编译配置文件。
• umi.js: 项目的主配置文件。
• README.md: 项目的主介绍文档。

2. 项目的启动文件介绍

Formily-Schema-Editor 的启动文件主要是 umi.js，它包含了项目的核心配置和启动逻辑。

// umi.js
export default {
  routes: [
    { path: '/', component: './index' },
  ],
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dynamicImport: { webpackChunkName: true },
      title: 'formily-editor',
      dll: true,
      pwa: {
        workboxOptions: {
          skipWaiting: true,
        },
      },
      routes: {
        exclude: [
          /models\//,
          /services\//,
          /model\.(t|j)sx?$/,
          /service\.(t|j)sx?$/,
          /components\//,
        ],
      },
    }],
  ],
};

启动文件介绍

• routes: 定义了项目的路由配置。
• plugins: 使用了 umi-plugin-react 插件，启用了 Ant Design、DVA、动态导入等功能。

3. 项目的配置文件介绍

Formily-Schema-Editor 的配置文件主要包括 package.json 和 umirc.js。

package.json

{
  "name": "formily-editor",
  "version": "1.0.0",
  "description": "SchemaEditor for Formily",
  "main": "index.js",
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "test": "umi test",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx ./",
    "precommit": "lint-staged"
  },
  "dependencies": {
    "umi": "^3.0.0",
    "antd": "^4.0.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0",
    "prettier": "^2.0.0"
  },
  "license": "MIT"
}

umirc.js

export default {
  routes: [
    { path: '/', component: './index' },
  ],
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dynamicImport: { webpackChunkName: true },
      title: 'formily-editor',
      dll: true,
      pwa: {
        workboxOptions: {
          skipWaiting: true,
        },
      },
      routes: {
        exclude: [
          /models\//,
          /services\//,
          /model\.(t|j)sx?$/,
          /service\.(t|j)sx?$/,
          /components\//,

formily-editorSchemaEditor项目地址:https://gitcode.com/gh_mirrors/fo/formily-editor