当前位置：首页 > news >正文

微前端之 Garfish.js 的基础使用教程和进阶配置

news 来源：原创 2025/6/16 2:12:08

前言

在现代前端开发中，微前端架构逐渐成为一种流行的解决方案。它允许将大型应用拆分成多个小型独立的子应用，从而提高开发效率和可维护性。Garfish.js 是一个强大的微前端框架，可以帮助我们轻松实现这一架构。在本文中，通过一个简单易懂的教程，一步步了解如何使用 Garfish.js。

使用步骤

一、安装 Garfish

在开始使用 Garfish.js 之前，我们需要先安装它。在项目根目录下运行以下命令：

npm install @garfish/core

二、初始化 Garfish

安装完毕后，我们需要在项目中初始化 Garfish。首先，在你的主应用中创建一个 Garfish 配置文件 garfish.config.js：

import Garfish from '@garfish/core';

const config = {
  // 指定你的微前端应用的入口
  apps: [
    {
      name: 'myApp',
      entry: 'http://localhost:3001',
      activeWhen: '/myApp',
    },
  ],
};

Garfish.run(config);

在这个配置文件中，我们通过 apps 属性定义了微前端应用的名称、入口 URL 和激活条件。

三、创建子应用

接下来，我们需要创建一个子应用。在这里，我们假设子应用是一个简单的 React 应用。首先，在子应用目录下初始化一个新的 React 项目：

npx create-react-app myApp

然后在 myApp 项目中安装 Garfish.js：

npm install @garfish/core

四、配置子应用

在子应用中，我们需要配置 Garfish，使它能够与主应用进行通信。在 myApp/src/index.js 文件中添加以下代码：

import Garfish from '@garfish/core';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const config = {
  // 子应用的名称必须与主应用中的配置保持一致
  name: 'myApp',
  // 子应用挂载的节点
  domGetter: () => document.getElementById('root'),
};

Garfish.registerApp(config);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

五、启动应用

现在，我们已经配置好了主应用和子应用。我们可以通过以下命令分别启动主应用和子应用：

# 启动主应用
npm start

# 启动子应用
cd myApp
npm start

六、访问应用

启动应用后，我们可以通过浏览器访问主应用。输入主应用的 URL，例如 http://localhost:3000，然后访问子应用的路径，例如 http://localhost:3000/myApp。你将看到子应用成功嵌入到主应用中。

高级配置

在完成基础配置的基础上，Garfish.js 还提供了一些高级功能，以满足更加复杂的需求。下面我们来看看几个常见的高级配置选项。

1. 生命周期钩子

Garfish.js 提供了丰富的生命周期钩子，可以让你在微前端应用加载、挂载、卸载等过程中执行自定义逻辑。这些钩子包括 beforeLoad、afterLoad、beforeMount、afterMount、beforeUnmount 和 afterUnmount。

你可以在配置文件中添加这些钩子，例如：

const config = {
  apps: [
    {
      name: 'myApp',
      entry: 'http://localhost:3001',
      activeWhen: '/myApp',
      beforeLoad(appInfo) {
        console.log('Before loading', appInfo);
      },
      afterMount(appInfo) {
        console.log('After mounting', appInfo);
      },
    },
  ],
};

2. 沙箱隔离

为了防止多个子应用之间的相互影响，Garfish.js 提供了沙箱隔离机制。默认情况下，每个子应用运行在独立的沙箱环境中。你可以通过配置沙箱选项来控制其行为：

const config = {
  apps: [
    {
      name: 'myApp',
      entry: 'http://localhost:3001',
      activeWhen: '/myApp',
      sandbox: {
        strictIsolation: true, // 开启严格隔离
        snapshot: true, // 启用快照
      },
    },
  ],
};

3. 预加载

为了提高子应用的加载速度，Garfish.js 支持预加载功能。你可以在配置中启用预加载：

const config = {
  apps: [
    {
      name: 'myApp',
      entry: 'http://localhost:3001',
      activeWhen: '/myApp',
      // 预加载配置
      props: {
        prefetch: true,
      },
    },
  ],
};

4. 自定义路由

Garfish.js 允许你自定义路由匹配规则，适应更加灵活的需求。你可以通过 activeWhen 配置项来实现：

const config = {
  apps: [
    {
      name: 'myApp',
      entry: 'http://localhost:3001',
      // 自定义路由匹配规则
      activeWhen: location => location.pathname.startsWith('/myApp'),
    },
  ],
};

调试与优化

在开发过程中，调试和优化是不可或缺的环节。Garfish.js 提供了一些实用工具和建议，帮助开发者更好地调试和优化微前端应用。

1. 调试工具

Garfish.js 内置了日志功能，可以帮助你了解微前端应用的加载、挂载和卸载过程。你可以通过配置 logger 选项来启用日志：

const config = {
  apps: [
    {
      name: 'myApp',
      entry: 'http://localhost:3001',
    },
  ],
  // 启用日志
  logger: {
    level: 'debug', // 可选值: 'info', 'warn', 'error', 'debug'
  },
};