自定义qiankun样式scoped规则.docxVIP

自定义qiankun样式scoped规则 1、HTML Entryqiankun 通过HTML Entry 的方式来解决JS Entry带来的问题 2、样式隔离采用shadow dom 包裹没一个微应用，从而确保微应用的样式互不干扰采用css scoped 方式（实验性）动态改写 css 选择器来实现 3、运行时沙箱qiankun的运行时沙箱分为 JS 沙箱和样式沙箱 4、资源预加载qiankun 实现预加载的思路有两种，一种是当主应用执行 start 方法启动 qiankun 以后立即去预加载微应用的静态资源，另一种是在第一个微应用挂载以后预加载其它微应用的静态资源，这个是利用 single-spa 提供的 single-spa:first-mount 事件来实现的 5、应用间通信qiankun 通过发布订阅模式来实现应用间通信 示例项目 官网地址 源码地址 yarn examples:install yarn examples:start qiankun 提供了6种实例，vue、vue3、react15、react16、angular9、purehtml。 image.png 主应用在 examples/main 目录下，提供了两种实现方式，基于路由配置的 registerMicroApps 和 手动加载微应用的loadMicroApp。通过 webpak.config.js 的 entry 可以知道有两个入口文件 multiple.js 和 index.js。 1、基于路由配置在 examples/main/index.js 中，将微应用关联到一些 url 规则，实现当浏览器 url 发生变化时，自动加载相应的微应用。主应用可以使用react进行运行，也可以使用vue进行运行。 registerMicroApps( [ { name: vue, entry: //localhost:7101, container: #subapp-viewport, loader, activeRule: /vue, }, ], { beforeLoad: [ app = { console.log([LifeCycle] before load %c%s, color: green;, ); }, ], beforeMount: [ app = { console.log([LifeCycle] before mount %c%s, color: green;, ); }, ], afterUnmount: [ app = { console.log([LifeCycle] after unmount %c%s, color: green;, ); }, ], }, ); 2、手动加载微应用在 examples/main/multiple.js 中有loadMicroApp实现的例子 function mount() { app = loadMicroApp( { name: react15, entry: //localhost:7102, container: #react15 }, { sandbox: { experimentalStyleIsolation: true } }, ); } vue微应用引入，需要修改 vue.config.js 和 mian.js 、public-path.js { ... // publicPath 没在这里设置，是通过 webpack 提供的全局变量 __webpack_public_path__ 来即时设置的，/guides/public-path/ devServer: { ... // 设置跨域，因为主应用需要通过 fetch 去获取微应用引入的静态资源的，所以必须要求这些静态资源支持跨域 headers: { Access-Control-Allow-Origin: *, }, }, output: { // 把子应用打包成 umd 库格式 library: `${name}-[name]`, // 库名称，唯一 libraryTarget: umd, jsonpFunction: `webpackJsonp_${name}`, } ... } let router =