最近在微前端框架 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插件不生效，必须构建出静态文件时使用）
-
第一步，修改snowpack 编译配置
snowpack.config.js
-
第二步，修改@snowpack/webpack-plugin 插件源码
@snowpack/webpack-plugin
-
第三步，使用 Snowpack 构建静态文件
build 代码
-
第四步，使用静态文件服务提供访问构建结果文件的访问入口
略...（常用的比如nginx服务，注意要支持跨域请求） -
第五步，修改 qiankun demo配置的入口，指向新服务
配置时需要注意应用名称必须匹配
名称匹配
- 第六步，成功集成Snowpack打包应用到qiankun框架当中
略...
备注
- 必须要修改 @snowpack/plugin-webpack 源码吗？
是的。只能通过修改源码的方式进行兼容。并且在CI过程或构建新环境时需要自己修改对应内容。或者使用 fork 版本 @snowpack/plugin-webpack 比如:
npm i https://github.com/DeronW/snowpack-plugin-webpack
- qiankun 与 snowpack 不兼容是谁的问题？
不兼容是双方的问题，qiankun 和 snowpack 只是采用了不同的标准来解决不同的问题，因此才出现兼容性问题。
网友评论