微前端在58商业的探索实践

export default (Voo) => {    Voo.Vue.prototype[appName] =vuePrototypeExtension    return { router,  store, App }}释：子应用暴露一个方法并返回router、store、App模块，供基座注册调用和回传基座对象（Voo）;原型扩展方法需要增加namespace，方便提供给子应用本身和其他应用复用。

export default [  { 'path': '/', 'redirect': 'home' },  { 'path': 'home', 'name': 'Home', 'component': Home }]释：暴露一个routes数组，供基座动态插入，由于基座与子应用运行在同一个router对象中，所以遵循“以 / 开头的嵌套路径会被当作根路径。这可以让你充分的使用嵌套组件而无须设置嵌套的路径”的规则。export default {state, mutations, actions, modules }释：暴露一个store module对象，供基座动态注册。

webpackConfig.output.library ='[name]'webpackConfig.output.libraryTarget= 'umd'释：修改输出目标为umd便于runtime、开发时基座的引用webpackConfig.output.jsonpFunction= appName释：如果在同一网页中使用了多个来自不同编译过程(compilation)的webpack runtime，则需要修改此选项。

webpackConfig.plugins.push(newwebpack.BannerPlugin({   'banner': '/* eslint-disable */', 'raw': true}))释：向bundle中追加eslint注释，防止基座eslint校验不通过。'devServer': {    'writeToDisk': true,    before(app,server) {       request.post('http://localhost:7777/__dev_subApp_register', {            'form': {                'id': [appName],                'resourcePath':path.resolve(__dirname, `dist/${[appName]}.js`)            }        }, (error, response, body) => {            if (error) {                console.error('[ error ]请先启动基座工程Voo')            } else {console.log(body)}        })    }}释：将构建目标写入到物理磁盘中，devServer默认是写入在虚拟内存中的，基座工程无法import。

'devServer': {    before(app, server) {                                    app.post('/__dev_subApp_register',(req, res) => {            const params =Object.assign(req.query, req.body)            const devSubAppRegisterInfo = `/* eslint-disable */export default (regiestSubApp, opts) => {import('${params.resourcePath}').then((res) => {    const subApp =res.default(opts)    regiestSubApp({        id: '${params.id}',      subApp    })})}`           fs.writeFileSync(`${__dirname}/__dev__subApp_register_info.js`,devSubAppRegisterInfo)            res.json({ 'code': 0, 'message': '开发时注册成功' })        })    }}释：编写子应用注册接口，在接收到子应用的注册请求后，将基座引用逻辑写入到__dev__subApp_register_info.js。

const requireSubApps =require.context('./', true, /\.js|.css$/)export defaultrequireSubApps.keys().map((fileName) => {  return requireSubApps(fileName).default})

before(app, server) {registe();app.post('/__dev_update', (req, res) => {registe()})}

if (module.hot) {  module.hot.accept('./main.js', ()=> {    fetch('/__dev_update')   });}同时修改dev和prod环境下的打包入口。configureWebpack(webpackConfig){        webpackConfig.entry =process.env.NODE_ENV === 'development'      ? { [appName]: ['./main.dev.js'] }      : { [appName]: ['./src/main.js'] }}

Voo.$router.addRoutes([      {'path': `/${ subApp.id}`, 'children': subApp.router,     'component': subApp.App}])

Voo.$store.registerModule(id,{ 'namespaced': true, ...subApp.store })。

constpostcssNamespaceGlobal = postcss.plugin('postcss-namespace-global', ({namespace= ''}) => (root) => {    root.walk((node) => {        if(node.selector){            node.selector =(node.selector.split(',').map((selector) => {                if(selector.match(/^(\s*)(html|body)(\s*)$/)) {                    return selector                }                return `${namespace}${selector}`            }).join(','))        }    })})module.exports ={'plugins': [postcssNamespaceGlobal({namespace: `.${appName}`})]}