为什么 qiankun 不能和 vite 一起使用？

qiankun 简介

qiankun 是蚂蚁金服开源的完善的微前端解决方案，经受过大量的线上系统的考验及打磨，是国内使用率较高的微前端框架之一，它具有不限制技术栈、完备的样式隔离、js 沙箱与资源预加载等特点，如其官网所说的一样:

可能是你见过最完善的微前端解决方案🧐

qiankun 为什么不能和 vite 一起使用？

在 qiankun 官网上，可以找到如何快速接入 qiankun 的教程，但仅有 webpack 的示例而没有 vite 的，根本原因在于 vite 与 qiankun 无法很好的结合在一起，其原因主要有以下两方面：

1. vite2 不支持 runtime publicPath，这项能力在 webpack 中由内置变量__webpack_public_path__提供，runtime publicPath是 qiankun 加载子应用的核心 (由 import-html-entry 模块提供) ，用于预加载及引入异步脚本
2. esm 会使 qiankun 的 js 沙箱失效，qiankun 内部的 js 沙箱使用将 window 对象进行了代理，以防止全局作用域被污染，但 esm 模块始终具有自己独立的顶级作用域，也就是说它访问到的 window 是全局作用域下的，而不是 qiankun 沙箱中提供的代理 window，虽然可以通过在生产环境打包为 umd 格式的方式来避免使用 esm，但有些本末倒置了

解决方案

社区

为了解决以上问题，社区中涌现出了诸如 vite-plugin-qiankun、vite-plugin-qiankunjs、vue-cli-plugin-vite-qiankun 等解决方案，以其中用户量最多的 vite-plugin-qiankun 来看，它对于以上两个问题的解决方案如下

1. 将 base 写死以解决预加载及动态导入的问题，此方案治标不治本，只能通过给定的 base 访问，子应用部署的一旦变化就需要进行更改
2. 提供 helper 暴露主应用传递的 代理 window 变量

尝试

针对 vite不支持 runtime publicPath的问题，我也曾试着去解决过，这就是 @sh-winter/vite-plugin-qiankun，此项目中，通过修改 vite2 中内部注入的 __VITE_ASSET__、__VITE_PRELOAD__标记，实现了 runtime publicPath，但是此方式侵入了 vite 的内部处理逻辑，随着 vite 的更新，随时可能会失效，所以不推荐使用

未来

runtime publicPath在 vite3.2 版本中得到了支持，后续就可以通过 experimental.renderBuiltUrl 来达成此目的

esm 的支持目前没有解决办法，只有等到 ShadowRealm (类似于 nodejs 的 vm 模块) 提案正式落地了，好消息是此提案已经进入第三阶段了，具体正式应用也不远了，让我们一起期待吧😉