字节微前端框架Garfish

Garfish 是字节跳动开源的微前端框架，旨在应对现代 Web 应用在前端生态繁荣与应用日益复杂化背景下的挑战。本文将介绍如何使用 Garfish，提供代码示例，并与另一流行的微前端框架 Qiankun 进行对比分析。

安装 Garfish

首先，安装 Garfish 核心库：

npm install @garfish/core --save

创建主应用

创建主应用的入口文件，如 index.js 或 main.js，并初始化 Garfish：

import Garfish from '@garfish/core';

const garfish = new Garfish({
  router: {
    historyType: 'hash',
    publicPath: '/',
    routes: [
      {
        path: '/app1',
        microApp: {
          name: 'app1',
          entry: '//localhost:8081',
          container: '#root',
          activeRule: (location) => location.pathname === '/app1',
        },
      },
      {
        path: '/app2',
        microApp: {
          name: 'app2',
          entry: '//localhost:8082',
          container: '#root',
          activeRule: (location) => location.pathname === '/app2',
        },
      },
    ],
  },
});

garfish.start();

开发与构建微应用

每个微应用都应有独立的构建流程，以下是基于 localhost:8081 运行的 Vue 应用示例：

Vue 示例

在微应用中，暴露必要的 API 供 Garfish 调用：

// app1/main.js
import { bootstrap, mount, unmount } from '@garfish/runtime-vue';
import App from './App.vue';

bootstrap(App).then(mount(App)).catch(console.error);

window.unmount = unmount;

使用 Webpack 或 Rollup 等工具来打包微应用。例如，使用 Webpack：

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    publicPath: '/',
  },
  // 其他配置...
};

打包完成后，将微应用部署到相应的服务器，如 localhost:8081。

Garfish 与 Qiankun 的对比

技术栈支持

• Garfish：兼容 Vue、React、Angular 等多种前端框架。
• Qiankun：同样支持多种前端框架，但在某些场景下的兼容性和表现可能有所不同。

路由管理

• Garfish：通过路由规则管理微应用的加载与卸载。
• Qiankun：采用类似机制，但在细节处理上存在一些差异。

隔离机制

• Garfish：使用沙箱机制，减少全局变量污染的风险。
• Qiankun：也提供了沙箱机制，但在某些案例中表现略逊。

配置复杂度

• Garfish：配置相对简单，路由配置即可启动。
• Qiankun：配置较为详细，尤其在处理跨域资源和状态管理时。

社区支持和文档

• Garfish：字节跳动出品，拥有强大的社区支持和丰富的文档资源。
• Qiankun：社区支持广泛，但文档和示例相对较少。

Garfish 常见问题

Garfish 支持哪些前端框架？

Garfish 支持包括 Vue、React、Angular 在内的多种前端框架，开发者可以根据自身的技术栈选择合适的框架。

如何处理跨域问题？

1. CORS 设置：确保服务器配置了适当的 CORS 设置。
2. 代理：在开发环境中使用 Webpack 等构建工具的代理功能。
3. JSONP：某些 API 场景下，可考虑使用 JSONP 请求。

如何保证微应用间的隔离？

Garfish 内置 VM 沙箱机制，确保微应用之间的资源隔离，避免全局变量污染。

如何调试微应用？

1. 开发者工具：利用浏览器的开发者工具。
2. 日志输出：使用 console.log() 等方法输出调试信息。
3. 单元测试：编写单元测试覆盖微应用的功能点。

结论

Garfish 为微前端开发提供了强大的工具集，能够有效解决跨团队协作、技术体系多样化等问题。Garfish 与 Qiankun 各有优势，选择框架时应根据项目的具体需求和技术偏好。通过遵循本指南，你可以充分利用 Garfish 的强大功能，构建高效、可维护的微前端系统。