Umi-plugin-qiankun 使用教程

Umi-plugin-qiankun 使用教程

umi-plugin-qiankun Umi plugin for qiankun. umi-plugin-qiankun 项目地址: https://gitcode.com/gh_mirrors/um/umi-plugin-qiankun

1. 项目介绍

Umi-plugin-qiankun 是一个基于 Umi 框架的微前端解决方案,它利用 qiankun 作为核心,提供了主应用与子应用之间的通信、路由同步、沙箱隔离等功能,使得微前端架构的开发变得更加简便和高效。

2. 项目快速启动

安装依赖

首先,确保你已经安装了 Node.js 和 npm。然后,在项目中安装 umi-plugin-qiankun:

npm i @umijs/plugin-qiankun -S
# 或者
yarn add @umijs/plugin-qiankun

主应用配置

在主应用中,你需要在 config/config.jsconfig/config.ts 中配置插件:

export default {
  plugins: [
    [
      '@umijs/plugin-qiankun',
      {
        master: {
          // 注册子应用信息
          apps: [
            {
              name: 'app1', // 唯一 id
              entry: '//localhost:7001', // 子应用 html entry
              base: '/app1', // 子应用的路由前缀
              history: 'browser', // 子应用的 history 配置
            },
            // 可以注册多个子应用
          ],
          jsSandbox: true, // 是否启用 js 沙箱
          prefetch: true, // 是否启用 prefetch 特性
        },
      },
    ],
  ],
};

子应用配置

在子应用中,同样需要在 config/config.jsconfig/config.ts 中配置插件:

export default {
  base: `/app2`, // 子应用的 base,默认为 package.json 中的 name 字段
  plugins: [
    '@umijs/plugin-qiankun',
  ],
};

并在 src/app.js 中暴露生命周期钩子:

export const qiankun = {
  async bootstrap(props) {
    console.log('app2 bootstrap', props);
  },
  async mount(props) {
    console.log('app2 mount', props);
  },
  async unmount(props) {
    console.log('app2 unmount', props);
  },
};

启动项目

完成配置后,分别启动主应用和子应用:

# 启动主应用
yarn start

# 启动子应用
yarn start

确保子应用和主应用在不同的端口上运行。

3. 应用案例和最佳实践

  • 案例:一个典型的电商网站可能包含商品展示、订单管理、用户管理等模块,这些模块可以作为独立的子应用开发,然后注册到主应用中。
  • 最佳实践:确保主应用和所有子应用使用相同的路由模式(如 browser 或 hash),以避免路由不匹配导致的404问题。

4. 典型生态项目

Umi-plugin-qiankun 作为 Umi 框架的插件,与 Umi 框架的其他插件和工具链配合使用,可以构建出功能丰富、结构清晰的大型前端项目。例如,结合 Umi 的 dva 插件进行状态管理,使用 Umi 的路由守卫进行权限控制等。

umi-plugin-qiankun Umi plugin for qiankun. umi-plugin-qiankun 项目地址: https://gitcode.com/gh_mirrors/um/umi-plugin-qiankun

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶真蔷Scott

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值