Garfish微前端框架快速入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00043/article/details/148783253

Garfish微前端框架快速入门指南

garfish 项目地址: https://gitcode.com/gh_mirrors/gar/garfish

前言

Garfish是一款由字节跳动开源的微前端框架，它能够帮助开发者轻松构建和管理多技术栈的前端应用。本文将详细介绍如何使用Garfish框架快速搭建微前端架构，包含主应用和子应用的完整接入流程。

主应用接入流程

1. 安装Garfish依赖

首先需要在主应用中安装Garfish核心包：

npm install garfish --save

2. 配置并启动Garfish

在主应用入口文件中，通过Garfish.run方法配置微前端环境：

import Garfish from 'garfish';

Garfish.run({
  basename: '/', // 基础路由
  domGetter: '#subApp', // 子应用挂载点
  apps: [
    {
      name: 'react-app', // 子应用名称
      activeWhen: '/react', // 激活路径
      entry: 'http://localhost:3000', // 子应用入口
    },
    {
      name: 'vue-app',
      activeWhen: '/vue',
      entry: 'http://localhost:8080/index.js',
    },
  ],
});

关键参数说明：

basename：主应用的基础路由路径
domGetter：子应用挂载的DOM节点选择器
apps：子应用配置数组，每个子应用需要指定名称、激活路径和入口地址

3. 注意事项

确保挂载节点(domGetter)在页面中始终存在，避免因路由变化导致节点消失
对于动态加载需求，可以使用Garfish.loadApp方法手动控制子应用加载

const app = await Garfish.loadApp('vue-app', {
  domGetter: '#container',
  entry: 'http://localhost:3000',
  cache: true,
});

app.mounted ? app.show() : await app.mount();

子应用接入流程

1. 构建配置调整

子应用需要输出UMD格式的代码，以下是不同构建工具的配置方式：

Webpack配置

// webpack.config.js
module.exports = {
  output: {
    libraryTarget: 'umd',
    library: 'sub-app', // 需要与主应用中注册的子应用名称一致
    publicPath: 'http://localhost:3000',
  },
};

Vite配置

// vite.config.js
export default {
  build: {
    lib: {
      entry: './src/main.js',
      name: 'sub-app',
      formats: ['umd'],
      fileName: 'index',
    },
  },
};

2. 导出Provider函数

Garfish提供了@garfish/bridge-react等桥接包简化接入流程：

npm install @garfish/bridge-react --save

使用桥接包导出Provider：

import { reactBridge } from '@garfish/bridge-react';

export const provider = reactBridge({
  el: '#root', // 子应用挂载点
  rootComponent: App, // 根组件
  errorBoundary: () => <ErrorComponent />, // 错误边界组件
});

3. 路由配置调整

子应用需要根据主应用传递的basename调整路由：

import { BrowserRouter } from 'react-router-dom';

const RootComponent = ({ basename }) => {
  return (
    <BrowserRouter basename={basename}>
      {/* 路由配置 */}
    </BrowserRouter>
  );
};