【微前端】微前端实践

1.微前端实践

https://www.jianshu.com/p/41ab812df9e7

1.portal 工程--- 入口工程

2.业务工程--子工程

3.特殊业务工程--layout

4.common工程--提取公共

import Vue from 'vue'; // 公共依赖
import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n';
import '@/css/icon-font/iconfont.css';
import ContentSelector from '@/components/ContentSelector'; // 公共组件

Vue.use(VueI18n); // 大家都要这么做，我们就代劳吧！
我们把这些公共依赖、公共组件、CSS、Fonts 等都放到一个工程里，由该工程进行打包，将依赖、组件 export，并以 UMD 的方式注入到全局。
module.exports = {
    'vue': Vue,
    'vue-router': VueRouter,
    'content-selector': ContentSelector,
};

-------
webpack 
output: {
    libraryTarget: "umd",
    library: 'mfe:common'
}
-----子工程
var externalModules = ['vue', 'vue-router', 'content-selector'];

module.exports = { // webpack 配置项
    // ...
    externals: (context, request, callback)=>{
        if(externalModules.includes(request)){
            callback(null, 'root window["mfe:common"]["'+request+'"]')
        } else {
            callback();
        }
    },
}