Garfish 微前端框架使用教程

1. 项目介绍

Garfish 是一个微前端框架，旨在解决现代网页应用在繁荣的前端生态和不断增长的复杂度背景下，前端应用跨团队合作、技术体系多样化以及应用复杂性增加等问题。Garfish 经过大量线上应用的打磨和测试，具有强大的功能稳定性和可靠性。

Garfish 的目标是将多个独立交付的前端应用组合成一个整体，同时将前端应用分解为一些可以“独立开发”、“独立测试”和“独立部署”的更小、更简单的应用，用户看来仍然是一个连贯的单个产品。

2. 项目快速启动

安装

使用 npm 或 yarn 安装 Garfish：

# 使用 npm
npm install garfish

# 使用 yarn
yarn add garfish

使用

在项目中引入 Garfish 并进行简单配置：

import Garfish from 'garfish';

Garfish.run({
  apps: [
    {
      name: 'app1', // 唯一 id
      entry: '//path/to/app1', // html entry 或 js entry
    },
    // 可以配置多个子应用
  ],
});

3. 应用案例和最佳实践

• 框架无关性：Garfish 支持任何类型的框架和技术体系访问。
• 独立开发、测试、部署：Garfish 支持子应用的独立开发、测试和部署。
• 预加载能力：Garfish 可以自动记录用户应用加载习惯，增加加载权重，大幅减少应用切换时间。
• 依赖共享：支持依赖共享，大幅减少整体包大小和依赖的重复加载。
• 数据采集：Garfish 支持数据采集，有效感知应用运行状态。
• 多实例能力：在页面中同时运行多个子应用，增强业务拆分能力。
• 调试工具：提供高效的调试工具，帮助用户解决微前端模式下与传统研发模式不同的开发体验问题。

4. 典型生态项目

Garfish 的生态项目中，包括但不限于以下几种类型：

• Loader：通过 HTML 入口或 JS 入口，轻松访问微前端应用。
• Router：提供路由驱动，主子路由隔离，用户只需配置路由表，应用即可独立渲染和销毁。
• Sandbox：提供应用运行时的隔离，有效隔离 JS 和样式的副作用。
• Store：提供简单的数据通信机制。
• 插件：提供业务插件，满足业务方的各种定制化需求。

通过以上教程，您可以快速上手 Garfish 微前端框架，并在项目中实践应用。