|公司前端代码，俺很懂( 四 )

2020-07-01

const apps = [ { name: 'admin', entry: ''//localhost:9528'', container:'#admin', activeRule: genActiveRule('/admin'), props: { shared, emitFnc: childEmit,//将上述的函数传递子应用 } } ]3、子应用获取并注册到子应用的全局变量中
export async function bootstrap(props) { const {emitFnc , shared = SharedModule.getShared() } = props; SharedModule.overloadShared(shared); Object.keys(emitFnc || {}).forEach(i => { Vue.prototype[`$${i}`] = emitFnc[i] }); }4、子应用通过在组件中调用this.$logout(this)即可完成通信。
公共资源共享
项目中存在大量的公共资源，例如公共方法，公共组件，公共UI 。在开发的时候不可能每个项目都复制一遍，这样既降低了开发效率，同时项目的体积增大，构建速度变慢。所以对于微前端项目，我们需要定制一套合适的方案将公共资源抽离出来，子应用可以在运行期动态获取到资源并加以使用，就像maven的顶级pom,将公共的jar抽离了出来。
1、这里以公共组件为例，将定义好的公共组件放置主应用的文件夹中并导出，创建一个js文件专门作为公共组件。
import InputEditor from './input-editor/src' //自定义公共组件 import ClipButton from './clip-button/src' //自定义公共组件 const components = [InputEditor,ClipButton]; const install = function (Vue) { components.forEach(component => { Vue.component(component.name, component); }); }; if (typeof window !== ''undefined'' && window.Vue) { install(window.Vue); } export default { install, };2、同样的，将此文件作为参数传递至子应用。
const apps = [ { name: 'admin', entry: ''//localhost:9528'', container:'#admin', activeRule: genActiveRule('/admin'), props: { shared, emitFnc: childEmit, components: Components//公共组件 } } ]3、子应用接收到参数后，将组件注册到自身的项目中
export async function bootstrap(props) { const {emitFnc ,components, shared = SharedModule.getShared() } = props; SharedModule.overloadShared(shared); Vue.use(components)//注册组件 Object.keys(emitFnc || {}).forEach(i => { Vue.prototype[`$${i}`] = emitFnc[i] }); }4、子应用可以在任何组件中使用父应用传递的组件。需要注意的是，使用公共组件的名称要和注册组件的名称保持一致，其他公共js类似。
通过父子间通信，我们大致可以了解到项目中如何实现鉴权，因为前端鉴权是一个难点，在微前端中鉴权方案有很多种，有兴趣的小伙伴可以尝试着去实现自身项目中的鉴权方案。
总结
qiankun ，意为统一。通过 qiankun 这种技术手段，让你能很方便的将一个巨石应用改造成一个基于微前端架构的系统，并且不再需要去关注各种过程中的技术细节，做到真正的开箱即用和生产可用。

本文插图

关于作者：卜壮，普元前端开发工程师，负责Mobile 8.0项目管理平台前端部分。熟悉ReactNative ，目前正在学习Vue ，大前端技术探求者。
【|公司前端代码，俺很懂】关于EAWorld：微服务， DevOps ，数据治理，移动架构原创技术分享。

推荐阅读

上一篇：AI烽火|物流共享那些事，你了解多少？

下一篇：成都商报红星新闻|“618”没买够？“718”中国西博嗨购节奉上7倍嗨购时长！