让Vite与微前端共舞：在Qiankun中巧妙融合

2023-11-09 22:28:53

在微前端的世界里，Qiankun 凭借其出色的可扩展性和灵活性脱颖而出，成为构建复杂前端架构的理想选择。然而，当我们试图在 Qiankun 的怀抱中引入 Vite 时，却发现官方文档的沉默令人费解。不用担心，本文将为您揭开这层神秘面纱，带领您踏上在 Qiankun中无缝整合基于 Vite 构建的子应用的奇妙之旅。

为何拥抱 Vite？

在 Vite 诞生之前，前端开发的江湖是一片群雄逐鹿的局面。随着时间的推移，Webpack 凭借其强大的功能和广泛的生态逐渐成为构建工具的王者。然而，当 Vite 横空出世时，一切都变了。

Vite 采用创新的缓存驱动的构建模式，摒弃了 Webpack 繁琐的打包过程。这种革命性的方法带来了以下令人惊叹的优势：

闪电般的启动速度： Vite 可以立即启动开发服务器，不再需要漫长的等待时间。
极速的热重载： 修改代码后，Vite 会在毫秒级内重新加载应用程序，极大地提高了开发效率。
原生 ES 模块支持： Vite 原生支持 ES 模块，无需额外的转换步骤，简化了开发流程。

Vite 的这些优势对于微前端架构来说尤为重要，因为微前端需要同时维护多个独立的子应用，而快速启动和热重载对于敏捷开发至关重要。

勇闯禁区：Vite 与 Qiankun 的融合之道

尽管官方文档语焉不详，但勇敢的探索者们从未止步。经过不懈的努力，我们发现了一种巧妙的方法，可以在 Qiankun 的怀抱中无缝集成基于 Vite 构建的子应用。

1. 创建 Vite 子应用

首先，让我们创建一个基于 Vite 的子应用。以下是如何操作：

npx create-vite-app my-vite-app --template vue || create-vite-app my-vite-app --template react

2. 集成 Qiankun

接下来，我们需要在 Vite 子应用中集成 Qiankun。为此，请安装 qiankun 包：

npm install --save qiankun

然后，在 src/App.js 或 src/App.vue 文件中，导入 Qiankun 并初始化子应用：

// 对于 Vue
import { h, ref } from 'vue'
import { registerMicroApps, setDefaultGlobalState } from 'qiankun'

const app = ref()

const registerApp = ({ name, entry, props }) => {
  registerMicroApps([
    {
      name,
      entry,
      props,
    },
  ])
}

export default {
  setup() {
    setDefaultGlobalState({
      app,
    })
    registerApp({
      name: 'sub-app',
      entry: 'http://localhost:3001/sub-app.js',
      props: {
        user: 'John',
      },
    })
    return () => h(app.value)
  },
}

// 对于 React
import { useEffect, useState } from 'react'
import { registerMicroApps, setDefaultGlobalState } from 'qiankun'

const App = () => {
  const [app, setApp] = useState()

  useEffect(() => {
    setDefaultGlobalState({
      app,
    })
    registerMicroApps([
      {
        name: 'sub-app',
        entry: 'http://localhost:3001/sub-app.js',
        props: {
          user: 'John',
        },
      },
    ])
  }, [])

  return app
}

export default App

3. 运行子应用

最后，我们需要启动子应用。为此，请在子应用的根目录中运行以下命令：

npm run dev

4. 集成主应用

现在，让我们将子应用集成到 Qiankun 主应用中。以下是如何操作：

import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'sub-app',
    entry: 'http://localhost:3000/sub-app.js',
    props: {
      user: 'John',
    },
  },
])

start()