Garfish 微前端框架使用教程

Garfish 微前端框架使用教程

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

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

Garfish 是一个用于构建微前端应用的框架。以下是项目的目录结构及其介绍：

garfish/
├── packages/          # 存放Garfish的核心代码和库
│   ├── garfish/       # Garfish主模块
│   ├── loader/        # 负责加载微应用的核心模块
│   ├── router/        # 路由模块，用于处理微应用的 routing
│   ├── sandbox/       # 沙箱模块，提供运行时隔离
│   └── store/         # 状态管理模块
├── scripts/           # 脚本文件，用于项目构建等
├── website-new/       # 官网代码
├── .github/           # GitHub相关配置
├── .husky/            # Husky配置，用于git钩子
├── .vscode/           # VSCode项目配置
├── cypress/           # Cypress测试配置
├── dev/               # 开发相关配置和工具
├── README.md          # 项目说明文件
├── LICENSE            # 项目许可证文件
├── babel.config.js    # Babel配置文件
├── cypress.config.ts  # Cypress配置文件
├── jest.config.js     # Jest测试配置文件
├── package.json       # 项目依赖和配置
└── tsconfig.json      # TypeScript配置文件

2. 项目的启动文件介绍

在Garfish项目中，启动文件通常是packages/garfish目录下的入口文件，例如index.js或index.ts。以下是启动文件的简要介绍：

• index.js 或 index.ts: 这是Garfish的核心入口文件，它导出Garfish的核心功能，使得用户能够创建和配置微前端应用。例如：

// index.js
import { createApp } from 'garfish';

const app = createApp({
  // 配置项
});

app.start();

3. 项目的配置文件介绍

项目的配置文件主要包括package.json和tsconfig.json，以下是这些配置文件的介绍：

• package.json: 该文件定义了项目的依赖、脚本和元数据。在Garfish项目中，它可能包含以下部分：

{
  "name": "garfish",
  "version": "1.19.4",
  "description": "A powerful micro front-end framework",
  "main": "dist/garfish.js",
  "scripts": {
    "build": "tsc && rollup -c",
    "start": "node scripts/dev.js"
  },
  "dependencies": {
    // 项目的依赖
  },
  "devDependencies": {
    // 开发依赖
  }
}

• tsconfig.json: TypeScript配置文件，它指定了项目的TypeScript编译选项。例如：

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

以上是Garfish项目的目录结构、启动文件和配置文件的简要介绍，希望对您使用Garfish有所帮助。

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