Vite-plugin-qiankun 开源项目安装与使用指南

目录结构及介绍

Vite-plugin-qiankun 是一个用于简化Vite应用程序集成到微前端架构 Qiankun 中的插件。以下是该项目的核心目录结构及其说明：

• src
  主要存放了源代码部分。

  • index.ts - 插件的主要入口文件。
  • helper.ts - 提供一系列辅助函数来支持插件的功能。

• cypress
  包含Cypress测试脚本的目录，用于自动化UI测试。

• scripts
  包含构建和打包脚本等。

• eslintrc.js
  ESLint规则配置文件。

• gitignore, npmignore
  版本控制忽略文件的设置。

• LICENSE, README.md
  分别是许可协议和项目介绍文件。

• cypress.json, package.json, tsconfig.json
  分别包含了Cypress配置、NPM项目元数据以及TypeScript编译配置。

启动文件介绍

在典型的Vite项目中，启动通常通过以下命令进行：

• npm run start 或 yarn start
  启动本地开发服务器，提供热更新功能。

由于Vite-plugin-qiankun本身作为一个开发依赖存在，其“启动”更多是指在你的Vite项目中注册并启用它。具体操作方式参见下文的配置文件介绍中的相关步骤。

配置文件介绍

vite.config.ts

这是Vite项目的配置文件，我们在此添加对vite-plugin-qiankun的引用以启用其功能。配置样例如下:

import qiankun from '@sh-winter/vite-plugin-qiankun';
import { name as packageName } from './package.json';

export default {
  base: `/${packageName}/`,
  plugins: [
    qiankun([
      packageName,
      // 可以根据需求添加更多的配置选项
    ]),
  ],
};

在这个配置文件中，我们首先从@sh-winter/vite-plugin-qiankun导入插件，然后在plugins数组中注册它。base字段定义了服务的基础路径，通常需要匹配你的微应用注册路径。

此外，在实际使用时可能还会涉及到qiankun的生命周期钩子的调用，这通常会在你的主应用或微应用的entry文件（如main.ts）中实现。例如：

// main.ts
import { exportLifeCycleHooks, qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper';

function render(root: Element | Document = document) {
  const app = createApp(App);
  app.mount(root.querySelector('#app'));
}

exportLifeCycleHooks({
  bootstrap() {},
  mount(props: { container: Element }) {
    render(props.container);
  },
  unmount() {
    app.unmount();
  }
});

if (qiankunWindow.__POWERED_BY_QIANKUN__) {
  render();
}

以上就是关于Vite-plugin-qiankun的基本配置和使用方法，能够帮助你快速地将Vite项目整合进微前端体系中。