基于alibaba/ice的微前端解决方案icestark实践指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00513/article/details/148374773

基于alibaba/ice的微前端解决方案icestark实践指南

ice ICE是阿里巴巴开源的一款企业级中后台搭建工具，提供了丰富的组件库、模板以及可视化拖拽功能，帮助企业快速构建高质量的企业级应用。项目地址: https://gitcode.com/gh_mirrors/ice1/ice

什么是微前端

微前端是一种将大型前端应用拆分为多个独立小型应用架构模式。它允许不同团队独立开发、部署和维护各自的前端模块，同时又能将这些模块无缝集成到一个统一的用户界面中。这种架构特别适合大型企业级应用，能够有效解决单体前端应用带来的维护困难、团队协作效率低下等问题。

icestark简介

icestark是飞冰团队提供的微前端解决方案，作为alibaba/ice项目的重要组成部分，它提供了完整的微前端实现方案。通过@ice/plugin-icestark插件，开发者可以轻松地将ice.js应用改造成微前端架构中的框架应用(主应用)或微应用(子应用)。

快速开始

创建框架应用(主应用)

框架应用是整个微前端架构的核心，负责管理各个微应用的加载和路由。使用以下命令快速创建：

npm init ice icestark-framework @icedesign/stark-layout
cd icestark-framework
npm install
npm start

创建微应用(子应用)

微应用是独立的功能模块，可以单独开发和部署。创建命令如下：

npm init ice icestark-child @icedesign/stark-child
cd icestark-child
npm install
npm start

手动改造现有应用

如果已有应用需要接入微前端架构，可以按照以下步骤进行改造。

安装必要插件

首先需要安装icestark插件：

npm i --save-dev @ice/plugin-icestark

框架应用改造

修改配置文件ice.config.mts：

import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';

export default defineConfig(() => ({
  plugins: [
    icestark({ type: 'framework' }), // 设置为框架应用
  ],
}));

配置应用入口src/app.ts：

import { defineFrameworkConfig } from '@ice/plugin-icestark/types';
import FrameworkLayout from '@/components/FrameworkLayout';

export const icestark = defineFrameworkConfig(() => ({
  layout: FrameworkLayout, // 全局布局组件
  getApps: () => ([
    {
      path: '/seller',
      title: '商家平台',
      loadScriptMode: 'import',
      entry: 'https://your-cdn.com/child-seller/index.html',
    },
  ]),
  appRouter: {}, // 路由配置
}));

微应用改造

修改配置文件ice.config.mts：

import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';

export default defineConfig(() => ({
  plugins: [
    icestark({ type: 'child' }), // 设置为微应用
  ],
}));

对于ice3微应用接入ice2主应用的特殊情况，需要在入口文件设置全局变量名：

import { setLibraryName } from '@ice/stark-app';

setLibraryName('microName'); // 通常使用package.json中的name字段

可选的生命周期配置：

import { defineChildConfig } from '@ice/plugin-icestark/types';

export const icestark = defineChildConfig(() => ({
  mount: () => {
    // 微应用挂载前执行
  },
  unmount: () => {
    // 微应用卸载后执行
  },
}));

核心配置详解

框架应用关键配置

getApps：获取微应用列表的核心方法，返回一个数组，每个元素代表一个微应用的配置。主要配置项包括：
- path：微应用的路由路径
- title：微应用显示名称
- loadScriptMode：脚本加载模式
- entry：微应用入口地址
layout：全局布局组件，必须包含children的渲染，用于显示微应用内容。
appRouter：icestark路由器的配置项，可以设置：
- NotFoundComponent：路由不匹配时的显示组件
- LoadingComponent：加载过程中的Loading组件
- ErrorComponent：加载错误时的显示组件