VueMfe

✨ A JavaScript library for Vue.js micro front-end(App) solution.

___________
| | |__ |__
| | |   |__

FEATURES

integrating event-driven design pattern.
support preinstall or lazyload a micro-app.
enhanced vue-router with helpers property, more.
support dynamically add child routes to an existing route & nested route.

How?

API

mfe.js 初始化 Vue-MFE:

import Vue from 'vue'
import VueMfe from 'vue-mfe';
import router from './router';

Vue.use(VueMfe)

export default new VueMfe({
  router,
  ignoreCase: true, // 忽略路径大小写 '/AuTh/uSEr' => '/auth/user'
  parentPath: '/', // 默认的 parentPath => router.addRoutes(routes, parentPath)
  getNamespace: (name) => `__domain__app__${name}`, // 返回子 domain 的全局命名规则
  getResource: () => { // 获取资源
    if (process.env.NODE_ENV === 'development') {
      return {
        bar: () => import('../../../domain-app/bar/esm'),
        foo: () => import('../../../domain-app/foo/esm'),
      }
    } else {
      return {
        bar: ['http://absolute/path/to/bar.umd.js'],
        foo: ['http://absolute/path/to/foo.umd.js'],
      }
    }
  }
});

preinstall.js 命名前缀预安装一个应用:

import mfe from './mfe'

if (!mfe.isInstalled('foo')) {
  mfe.preinstall('foo').then(() => {
    console.log('isInstalled:', mfe.isInstalled('foo')); // true

    // does path exist or not
    if (mfe.helpers.pathExists('/foo')) {
      // eslint-disable-next-line
      console.log('/foo route:', mfe.helpers.findRoute('/foo')) /* findRoute(path: string) */

      if (!mfe.helpers.pathExists('/foo/dynamic')) {
        /* add route dynamic with parentPath and exists route */
        mfe.addRoutes([{
          path: '/dynamic',
          parentPath: '/foo',
          component: {
            template: '<h2>i am /foo/dynamic page</h2>'
          }
        }])
      }
    }
  })
}

main.js 初始化应用:

import Vue from 'vue'
import VueMfe from 'vue-mfe'
import router from './router'
import mfe from './mfe'
import './preinstall'

new Vue({
  mfe, // 像 Vuex 一样传入应用
  router,
  created() {
    // event: when load micro-app start
    this.$mfe.on('start', ({ name }) => {
      console.log(`Load ${name} start`);
    });

    // event: when load micro-app success
    this.$mfe.on('end', ({ name }) => {
      console.log(`Load ${name} success`);
    });

    // event: when load micro-app failed with diff error code
    this.$mfe.on('error', (error, { name }) => {
      console.log(name, error.code, VueMfe.ERROR_CODE);
      console.error(error);
    });
  },
  template: `
    <div id="app">
      <h1>Vue-MFE</h1>
      <router-view></router-view>
    </div>
  `
}).$mount('#app')

TODO

write unit test cases
write demo with multiple webpack
update docs by vuepress
publish package to npm registry

Troubleshooting

This needs to be changed if multiple webpack runtimes (from different compilation) are used on the same webpage. Does anyone know how to resolve it?

Multiple Webpack entry points loaded
[Dynamic require breaks when using more than one webpack bundle at the same time] (webpack/webpack#3791)
在同一个页面中加载多个 webpack 实例
How can I combine two completely separate bundles using dynamic bundling?
hosting-multiple-react-applications-on-the-same-document

BotellaA/vue-mfe

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages