前端微服务化进阶2 - 本地开发指南

2019-04-22

使用single-spa构建我们的微服务化的前端应用之后,其实有一个问题会一直困扰着我们, 就是如何有效的开发?如何与我们平时开发的前端应用一样简单,容易上手. 今天就以umi子模块为例,希望给到大家一个思路

今天我就介绍一种方法,希望对大家有帮助.

模块加载器

是否还记得我之前的模块加载器, https://alili.tech/archive/1a60cede/

我们只需要将原来模块的加载器,封装成npm包.

然后在我们开发子模块项目的时候,运行我们的加载器

// umi src/app.js
import bootstrap from '@demo/demo-module-dev-loader' //封装过后的npm包
import store from 'store'; // 我们用于通讯的store文件

export async function render(oldRender) {
  if (process.env.NODE_ENV === 'development') {
    const main = oldRender();
    const res = await window.fetch('./project.json');
    let currentProject = await res.json();
    bootstrap({
      main,
      store,  
      prefix: currentProject.prefix
    });
  } else {
    oldRender();
  }
}

module-dev-loader

我们的demo-module-dev-loader里一样会有一个 Bootstrap.js文件,我们对他进行一些小的修改.

import * as singleSpa from 'single-spa';
import { registerApp,registerLocal } from './Register'

export default   async  function bootstrap (local) {
    // 拿到我们的项目配置文件,但是我们的本地是没有这个文件的.

    // 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件
    // 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件
    // 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件

    // 重要的事情说三遍
    const projectConfig = await window.SystemJS.import('/project.config.js')
    const res = await window.fetch('/project.json')
    const currentProject = await res.json()
    let {projects} = projectConfig;

    // 移除当前项目,因为当前项目会使用registerLocal方法注册
    projects = projects.filter(ele => ele.name !== currentProject.name)

    // 注册我们的线上测试环境的
    for (let index = 0; index < projects.length; index++) {
        const project = projects[index];
        await registerApp({
            name: project.name,
            main: `${project.main}`,
            store: project.store,
            base: project.base,
            prefix: project.prefix
        });
    }
    // 重点!!!
    // 注册本地正在开发的模块
    local && registerLocal(local)
    singleSpa.start();
}

registerLocal 方法展示

// Register.js
// 在原来registerApp上做了一些删减,大概的原理是一模一样的
export function registerLocal({base,main,prefix,store,name='local'}){
  // 导入store模块
let storeModule = {}, customProps = { globalEventDistributor: globalEventDistributor };

storeModule = store && { storeInstance: null };

  // 注册应用于事件派发器
  if (storeModule.storeInstance && globalEventDistributor) {
    // 取出 redux storeInstance
    customProps.store = storeModule.storeInstance;
    // 注册到全局
    globalEventDistributor.registerStore(storeModule.storeInstance);
  }

  singleSpa.registerApplication(name, async ()=> main, base ? (() => true) : hashPrefix({prefix}),customProps);
}


// 原来的registerApp方法,与以前一模一样,没有改动.
// 为了方便对比registerLocal,所以列出来 供大家参考
export async function registerApp(params) {
// 导入store模块
let storeModule = {}, customProps = { globalEventDistributor: globalEventDistributor };

// 尝试导入store
try {
    storeModule = params.store ? await window.SystemJS.import(params.store) : { storeInstance: null };
} catch (e) {
    console.log(`Could not load store of app ${params.name}.`, e);
    //如果失败则不注册该模块
    return
}
  // 注册应用于事件派发器
  if (storeModule.storeInstance && globalEventDistributor) {
    // 取出 redux storeInstance
    customProps.store = storeModule.storeInstance;

    // 注册到全局
    globalEventDistributor.registerStore(storeModule.storeInstance);
  }

  singleSpa.registerApplication(params.name, async ()=> await window.SystemJS.import(params.main), params.base ? (() => true) : hashPrefix(params), customProps);

}

umi插件

我们的umi插件也需要修改

// 还是原来的元素加载方法
  const domElementGetterStr = `
      function domElementGetter() {
        let el = document.getElementById('submodule-page')
        if (!el) {
          el = document.createElement('div')
          el.id = 'submodule-page'
        }
        let timer = null
        timer = setInterval(() => {
          if (document.querySelector('#submoduleContent.submoduleContent') && !document.querySelector('#submodule-page')) {
                document.querySelector('#submoduleContent.submoduleContent').appendChild(el)
                clearInterval(timer)
          }
        }, 100)

        return el
    }`


// 在umi 导入single-spa-react模块
// 并且封装我们的rootElement 组件,拿到我们的生命周期实例
    api.addEntryCodeAhead(`
    import singleSpaReact from 'single-spa-react';
    let reactLifecycles;
    reactLifecycles =  singleSpaReact({
        React,
        ReactDOM,
        rootComponent: (spa) => window.g_plugins.apply('rootContainer', {
        initialValue: React.createElement(require('./router').default),
        }),
        domElementGetter: ${options.base?`() => document.getElementById('root')`:domElementGetterStr}
    });
  `);


      // 开发环境
    if (process.env.NODE_ENV === 'development') {
      // 替换我们的渲染函数为以下内容,直接返回子模块的声明周期
      // 这样我们就可以在一开始写的的app.js里面的render函数,拿到这些返回的东西呢
      // 通过我们修改过后的模块加载器,注册到single-spa中
      api.modifyEntryRender(`
      const bootstrap = [
        reactLifecycles.bootstrap,
        ];

        const mount = [
        reactLifecycles.mount,
        ];

        const unmount = [
        reactLifecycles.unmount,
        ];
        return {
          bootstrap,
          mount,
          unmount
        }
    `);

    }

// 经过以上的修改之后,我们的umi会失去热更新的功能,
// 只能退而求其次,主动刷新浏览器,不过也不伤大雅
// 编译完成之后,主动刷新浏览器
  api.onDevCompileDone(() => {
    api.refreshBrowser()
  });

webpack代理

别忘了修改代理配置,为了可以直接拿到所有的项目位置

{
    devServer: {
    proxy: {
      '/project.config.js': {
        // 你的测试环境地址
        target: 'https://demo.xyz/',
      }
    }
  },
}

尾巴

所有的前端微服务化的关键点,今天算是全部写完了. 经过了大半年的思考与探索,为去年9月份的自问自答的:

前端微服务化解决方案1 - 思考我们即将面临以下问题:

我们如何实现在一个页面里渲染多种技术栈?
不同技术栈的独立模块之间如何通讯?
如何通过路由渲染到正确的模块?
在不同技术栈之间的路由该如何正确触发?
项目代码别切割之后,通过何种方式合并到一起?
我们的每一个模块项目如何打包?
前端微服务化后我们该如何编写我们的代码?
独立团队之间该如何协作?

现在已经全部得出了答案.

前端微服务化进阶2 - 本地开发指南

模块加载器

module-dev-loader

registerLocal 方法展示

umi插件

webpack代理

尾巴

相关系列文章

微信公众号

本文链接：

# 最新文章