Frontend Discovery 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00080/article/details/139715055

Frontend Discovery 项目教程

frontend-discovery The aim of this project is to define and drive adoption of a frontend discovery pattern, with a primary focus on client-side rendered (CSR), server-side rendered (SSR) and edge-side rendered (ESR) micro-frontends 项目地址: https://gitcode.com/gh_mirrors/fr/frontend-discovery

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

Frontend Discovery 项目的目录结构如下：

frontend-discovery/
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
└── schema/
    └── ...

目录结构介绍

CODE_OF_CONDUCT.md: 项目的行为准则文件，规定了参与项目的人员应遵守的行为规范。
CONTRIBUTING.md: 贡献指南文件，提供了如何为项目贡献代码的详细说明。
LICENSE: 项目的许可证文件，指定了项目的开源许可证类型。
README.md: 项目的介绍文件，包含了项目的基本信息、目标和使用说明。
schema/: 包含项目的主要代码和配置文件的目录。

2. 项目的启动文件介绍

Frontend Discovery 项目没有明确的“启动文件”，因为它主要是一个定义和驱动前端发现模式的规范和文档项目。项目的核心内容主要集中在 schema 目录下的文件中。

3. 项目的配置文件介绍

Frontend Discovery 项目的主要配置文件是 schema 目录下的文件，这些文件定义了前端发现模式的规范和示例。以下是一些关键文件的介绍：

schema/README.md: 提供了 schema 目录的详细说明，包括如何使用和扩展这些规范。
schema/schema.json: 定义了前端发现模式的 JSON 架构，包含了微前端的入口点、部署机制和其他元数据。

配置文件示例

以下是一个简化的 schema.json 文件示例：

{
  "schema": "https://mfewg.org/schema/v1-pre.json",
  "microFrontends": {
    "@my-project/catalog": [
      {
        "url": "https://static.website.com/my-catalog-1.3.5.js",
        "fallbackUrl": "https://alt-cdn.com/my-catalog-1.3.5.js",
        "metadata": {
          "integrity": "e0d123e5f316bef78bfdf5a008837577",
          "version": "1.3.5"
        },
        "extras": {
          "modulefederation": {
            "prefetch": ["@my-project/myaccount"]
          }
        }
      }
    ],
    "@my-project/myaccount": [
      {
        "url": "https://static.website.com/my-account-1.2.2.js",
        "fallbackUrl": "https://alt-cdn.com/my-account-1.2.2.js",
        "metadata": {
          "integrity": "e0d123e5f316bef78bfdf5a008837577",
          "version": "1.2.2"
        },
        "deployment": {
          "traffic": 30,
          "default": false
        }
      },
      {
        "url": "https://static.website.com/my-account-2.0.0.js",
        "fallbackUrl": "https://alt-cdn.com/my-account-2.0.0.js",
        "metadata": {
          "integrity": "e0d123e5f316bef78bfdf5a008837577",
          "version": "2.0.0"
        },
        "deployment": {
          "traffic": 70,
          "default": true
        }
      }
    ]
  }
}