Turborepo + Qiankun + pnpm 实践方案

背景

在企业项目中，使用 Qiankun 框架进行微应用整合时，尽管已经实现了微应用的统一管理，但仍面临以下挑战：

公共组件更新：难以实现统一的管理与维护。
重复开发：各子仓库可能单独开发和维护各自的组件，导致维护困难。
构建方式不统一：构建环境变量难以统一管理。

为解决这些问题，推荐使用 Turborepo 和 pnpm 来优化项目构建和依赖管理。

为什么使用 Turborepo？

构建工具：
- Turborepo 是一个高效的构建工具，专为多项目管理设计，帮助优化构建流程。
加速与简化依赖管理：
- Turborepo 能有效管理多包依赖关系，简化项目的依赖管理。
提升构建速度与性能：
- 构建过程被定义为一系列任务，每个任务有明确的输入（inputs）和输出（outputs）。
- 每次输入生成的 hash 值会与缓存中的 hash 值进行比较，从而加速构建过程。

Lerna 与 Turborepo 的区别

Lerna：
- 主要用于多包管理和包版本发布，通过 lerna.json 配置文件进行管理。
- 更适合处理包的发布和版本控制。
Turborepo：
- 适用于需要构建优化和性能提升的项目，提供高效的构建和缓存机制。
- 更关注构建速度和性能优化。

实践方案

1. 创建项目

1.1 创建 Turborepo 应用

使用 pnpm 创建 Turbo 应用：

pnpm dlx create-turbo@latest

1.2 创建基座项目

进入 apps 目录并创建基座项目：

cd apps
vue create micro-base
cd micro-base

1.3安装 Qiankun

在基座项目中安装 Qiankun

pnpm install qiankun

2. 配置基座应用

2.1 注册微应用

在基座项目中，创建 appConf.js 文件并配置微应用：

// appConf.js
export const APP_CONF = [
  {
    name: "sub-mis", // 子应用名称
    entry: "//localhost:5173", // 子应用的入口地址
    activeRule: "/subMis", // 匹配的路由
    container: "#sub-app", // 挂载容器
  },
];

2.2 配置入口文件

在基座应用的入口文件中，引入并配置 Qiankun：

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { APP_CONF } from "./appConf";
import { start, registerMicroApps } from "qiankun";
import "ant-design-vue/dist/reset.css";

// 注册微应用
registerMicroApps(APP_CONF, {
  beforeLoad: [async (app) => console.log("before load", app.name)],
  beforeMount: [async (app) => console.log("before mount", app.name)],
  afterMount: [async (app) => console.log("after mount", app.name)],
});

// 启动 Qiankun
start();

// 启动 Vue 应用
createApp(App).use(store).use(router).mount("#app");

3. 配置子应用

3.1 安装 Vite 插件

在子应用中安装 vite-plugin-qiankun 插件：

sh
复制代码
pnpm install vite-plugin-qiankun

3.2 配置子应用的入口文件

判断是否由 Qiankun 管理并进行相应渲染：

js
复制代码
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import { renderWithQiankun } from "vite-plugin-qiankun";

// 子应用实例
let app = null;

// 判断是否由 Qiankun 管理
if (!window.__POWERED_BY_QIANKUN__) {
  createApp(App).mount("#app");
} else {
  renderWithQiankun({
    mount(props) {
      app = createApp(App);
      app.mount(props.container.querySelector("#app"));
    },
    bootstrap() {
      console.log("vue app bootstrap");
    },
    update() {
      console.log("vue app update");
    },
    unmount() {
      console.log("vue app unmount");
      app && app.unmount();
    },
  });
}

3.3 配置 Vite 文件

在子应用中，创建 vite.config.js 文件并配置 vite-plugin-qiankun：

js
复制代码
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import qiankun from "vite-plugin-qiankun";

export default defineConfig({
  base: "/subMis", // 与基座中的 activeRule 一致
  plugins: [
    vue(),
    qiankun("subMis", {
      useDevMode: true, // 启用开发模式
    }),
  ],
});

4. 注意事项

版本兼容性：确保使用的 Turborepo、Qiankun 和 Vite 插件的版本兼容，以避免不必要的问题。检查工具的官方文档和更新日志，确保你的配置符合最新的最佳实践。
公共组件管理：虽然 Turborepo 可以帮助管理和优化构建过程，但公共组件的统一管理仍需要良好的团队协作和流程管理。建议建立组件库，集中管理和版本控制公共组件。
缓存机制：Turborepo 的缓存机制有助于加速构建过程，但请根据实际需求调整 turbo.json 配置文件，以确保缓存策略符合项目需求。

总结

通过使用 Turborepo 和 pnpm，可以有效解决在企业项目中遇到的公共组件管理、构建方式统一性等问题，提升项目的构建速度和维护效率。同时，结合 Qiankun 和 Vite，可以实现高效的微应用架构，增强项目的灵活性和可维护性。

Turborepo + Qiankun + pnpm 实践方案（一）