微前端框架 Qiankun 如何集成 Snowpack 打包的微应用

最近在微前端框架 Qiankun 中加载一个 使用了Snowpack 工具来打包项目时无法正常使用。检查后发现 Qiankun 目前还不支持 Snowpack，Qiankun作为微前端的容器，虽然以“乾坤”为名，以包纳万物为目标，但是被包含的微应用必须符合 Qiankun 的接口标准，不只是几个钩子函数，还需要符合打包的模块化规则。

运行qiankun官方Demo

git clone https://github.com/umijs/qiankun.git qiankun
git checkout v2.3.5
cd qiankun
yarn install
yarn example:install
yarn example:start

官方Demo

添加 Snowpack 打包应用

启动 Snowpack 应用

Snowpack应用

添加qiankun钩子函数

Snowpack项目入口文件

在qiankun的demo项目中添加微应用入口

examples/main/index.html

examples/main/index.js

打开qiankun页面，切换到 Snowpack页面

error page

此时微应用加载失败，控制台报错 “Unexpected token export”

错误原因

qiankun 框架使用 import-html-entry 库从微应用的html文件中获取script文件，import-html-entry 默认所有的script文件都是符合ES5模块标准的JavaScript文件。这是因为 qiankun 做了一个假设，微应用要么是由 webpack 打包的，要么是可以手写入口钩子函数的。

qiankun依赖库

Snowpack 使用的 ESM 方式导出文件，所以既不是ES5模块，也支持手写入口文件，所以在 import-html-entry 解析微应用代码 时，会提示语法出错，未识别的 export 关键字。

打包后文件需要符合几点规范，这也是为什么 qiankun 要求在微应用在打包时添加指定配置

webpack.config.js 指定配置

解决方法

Snowpack 的 ESM 模块打包方式与 qiankun 微前端方案存在根本冲突，不能兼容。所以使用 @snowpack/plugin-webpack 插件，在 Snowpack 构建时使用 webpack 再编译一次（注意：开发模式下，webpack插件不生效，必须构建出静态文件时使用）

1. 第一步，修改snowpack 编译配置

   
   
   snowpack.config.js

2. 第二步，修改@snowpack/webpack-plugin 插件源码

代码位置：https://github.com/snowpackjs/snowpack/blob/158bb9388a0bbb4a8a9d5dd07b576c727a61cf28/plugins/plugin-webpack/plugin.js#L376

@snowpack/webpack-plugin

3. 第三步，使用 Snowpack 构建静态文件

   
   
   build 代码

4. 第四步，使用静态文件服务提供访问构建结果文件的访问入口
   略...（常用的比如nginx服务，注意要支持跨域请求）

5. 第五步，修改 qiankun demo配置的入口，指向新服务

配置时需要注意应用名称必须匹配

名称匹配

6. 第六步，成功集成Snowpack打包应用到qiankun框架当中
   略...

备注

1. 必须要修改 @snowpack/plugin-webpack 源码吗？
   是的。只能通过修改源码的方式进行兼容。并且在CI过程或构建新环境时需要自己修改对应内容。或者使用 fork 版本 @snowpack/plugin-webpack 比如:

npm i https://github.com/DeronW/snowpack-plugin-webpack

2. qiankun 与 snowpack 不兼容是谁的问题？
   不兼容是双方的问题，qiankun 和 snowpack 只是采用了不同的标准来解决不同的问题，因此才出现兼容性问题。