因为公司有使用微前端技术,技术栈为 qiankun,为了保证对 qiankun 的支持,使用了开发模式走 vite,构建走 webpack:如何在 webpack 项目中使用 vite 加速。 但是vite 的开发体验实在是太爽了,于是寻找了一波 qiankun 的 vite 插件,都没有对生产环境 js,css 沙箱的集成,于是只能自己动手写了一个:vite-plugin-leg...
vite-plugin-legacy-qiankun 让vite 丝滑兼容qiankun,且生产环境保证沙箱环境。 example code 在线体验地址 安装 npmivite-plugin-legacy-qiankun@vitejs/plugin-legacy-D 版本需要 vite >= 3 特性 保留native module 生产环境 js 沙箱 生产环境 css 沙箱 ...
/vite-plugin-legacy-qiankun/ dist/ folder 17.2 kB test/ folder 4.68 kB .eslintignore text/plain 41 B .eslintrc.js application/javascript 190 B README.md text/markdown 4.76 kB index.ts application/typescript 8.26 kB package.json application/json 1.33 kB pnpm-workspace.yaml text/yaml 35 ...
让vite 集成 qiankun,支持 js,css 沙箱. Contribute to lishaobos/vite-plugin-legacy-qiankun development by creating an account on GitHub.
不过Vite 同时提供了一些弥补的方法,使用build.polyfillDynamicImport配置项配合 @vitejs/plugin-legacy 打包出一个看起来兼容性比较好的版本,我相信这一点会随时间慢慢被抹平。 3.2 缺少 Show Case Vite 太新了,直到最近才释放出正式 2.0版本,社区还没太反应过来,自然也就没什么大型、复杂的商业落地案例,谁都说不...
qiankun(APP_NAME, { useDevMode: true }), createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [resolve(process.cwd(), "src/assets/svgs")], // 指定symbolId格式 symbolId: "icon-[dir]-[name]", }), legacy(), topLevelAwait({ ...
通过上面的配置,再次构建,qiankun 可以加载这个子应用了。 其他说明 1. 老旧浏览器的支持 由于我这次的项目是中后台项目,对老旧浏览器的支持诉求不强烈,就没有在项目中做处理。其实 vite 官方也是给了解决方案的,就是@vitejs/plugin-legacy这个插件。
默认的构建目标是能支持原生 ESM 语法的 script 标签、原生 ESM 动态导入和import.meta的浏览器。传统浏览器可以通过官方插件@vitejs/plugin-legacy支持 —— 查看构建生产版本章节获取更多细节。 所以说,默认情况下,vite构建的项目支持的浏览器具体要看该浏览器支不支持原生 ESM 模块语法(具体支持版本看原生 ESM 语...
不过Vite 同时提供了一些弥补的方法,使用build.polyfillDynamicImport配置项配合 @vitejs/plugin-legacy 打包出一个看起来兼容性比较好的版本,我相信这一点会随时间慢慢被抹平。 3.2 缺少 Show Case Vite 太新了,直到最近才释放出正式 2.0版本,社区还没太反应过来,自然也就没什么大型、复杂的商业落地案例,谁都说不...
生产环境下,模块被 Rollup 以传统方式打包,而且做了很多默认优化。虽然默认是打包的格式也是 ESM,但也可以通过 plugin-legacy 输出其它格式兼容旧浏览器。 开发和生产环境下共享同一套 Rollup 插件机制,所以单个模块的编译在开发和生产环境下是一致的。有些人担心一个打包一个不打包会产生不一致,这个理论上存在可能性...