最近在微前端框架 Qiankun 中加載一個(gè) 使用了Snowpack 工具來(lái)打包項(xiàng)目時(shí)無(wú)法正常使用幅疼。檢查后發(fā)現(xiàn) Qiankun 目前還不支持 Snowpack，Qiankun作為微前端的容器痘番，雖然以“乾坤”為名次酌，以包納萬(wàn)物為目標(biāo)瀑晒，但是被包含的微應(yīng)用必須符合 Qiankun 的接口標(biāo)準(zhǔn)，不只是幾個(gè)鉤子函數(shù)，還需要符合打包的模塊化規(guī)則赚瘦。
運(yùn)行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
添加 Snowpack 打包應(yīng)用
啟動(dòng) Snowpack 應(yīng)用
添加qiankun鉤子函數(shù)
在qiankun的demo項(xiàng)目中添加微應(yīng)用入口
打開qiankun頁(yè)面，切換到 Snowpack頁(yè)面
此時(shí)微應(yīng)用加載失敗奏寨，控制臺(tái)報(bào)錯(cuò) “Unexpected token export”
錯(cuò)誤原因
qiankun 框架使用 import-html-entry 庫(kù)從微應(yīng)用的html文件中獲取script文件起意，import-html-entry 默認(rèn)所有的script文件都是符合ES5模塊標(biāo)準(zhǔn)的JavaScript文件。這是因?yàn)?qiankun 做了一個(gè)假設(shè)病瞳，微應(yīng)用要么是由 webpack 打包的揽咕，要么是可以手寫入口鉤子函數(shù)的。
Snowpack 使用的 ESM 方式導(dǎo)出文件仍源，所以既不是ES5模塊心褐，也支持手寫入口文件，所以在 import-html-entry 解析微應(yīng)用代碼 時(shí)笼踩，會(huì)提示語(yǔ)法出錯(cuò)逗爹，未識(shí)別的 export 關(guān)鍵字。
打包后文件需要符合幾點(diǎn)規(guī)范嚎于，這也是為什么 qiankun 要求在微應(yīng)用在打包時(shí)添加指定配置
解決方法
Snowpack 的 ESM 模塊打包方式與 qiankun 微前端方案存在根本沖突掘而，不能兼容。所以使用 @snowpack/plugin-webpack 插件于购，在 Snowpack 構(gòu)建時(shí)使用 webpack 再編譯一次（注意：開發(fā)模式下袍睡，webpack插件不生效，必須構(gòu)建出靜態(tài)文件時(shí)使用）
-
第一步肋僧，修改snowpack 編譯配置
snowpack.config.js 第二步斑胜，修改@snowpack/webpack-plugin 插件源碼
-
第三步控淡，使用 Snowpack 構(gòu)建靜態(tài)文件
build 代碼 第四步，使用靜態(tài)文件服務(wù)提供訪問構(gòu)建結(jié)果文件的訪問入口
略...（常用的比如nginx服務(wù)止潘，注意要支持跨域請(qǐng)求）第五步掺炭，修改 qiankun demo配置的入口，指向新服務(wù)
配置時(shí)需要注意應(yīng)用名稱必須匹配
- 第六步凭戴，成功集成Snowpack打包應(yīng)用到qiankun框架當(dāng)中
略...
備注
- 必須要修改 @snowpack/plugin-webpack 源碼嗎涧狮？
是的。只能通過修改源碼的方式進(jìn)行兼容么夫。并且在CI過程或構(gòu)建新環(huán)境時(shí)需要自己修改對(duì)應(yīng)內(nèi)容者冤。或者使用 fork 版本 @snowpack/plugin-webpack 比如:
npm i https://github.com/DeronW/snowpack-plugin-webpack
- qiankun 與 snowpack 不兼容是誰(shuí)的問題档痪？
不兼容是雙方的問題涉枫，qiankun 和 snowpack 只是采用了不同的標(biāo)準(zhǔn)來(lái)解決不同的問題，因此才出現(xiàn)兼容性問題钞它。
