React 攒机之旅 --- 伪微前端

前言

好了，终于，到了我可以尽情吹牛*的时候了。 不过你看标题，在微前端之前，我加了个“伪”字，我还是很谦虚的不是。

言归正传，在第一次看到“微前端”这个词的时候，我第一时间想到的是，这不就是微服务的新瓶装旧酒嘛。

而我对于微服务的理解，其实它更像是一个思想，一个由于软件系统发展的必然过程。而无论人肉运维也好，Spring Cloud也好，还是我所期待的下一代微服务框架Spring Cloud K8s也好，不过都是微服务这一思想的技术实现，其作用不过是将拆分开的服务再次组合起来而已。 这样想来，也就不那么鄙视人肉运维了。如同信息化减少了业务人员重复劳动，而技术的进步使得技术人员不得不做的S*工作也越来越少。也许未来的某天，我们开心的使用着k8s，想想年轻的自己，还要为注册中心的配置而烦恼，是不是很傻。

同理到微前端，首先我对其实现方式进行了搜索，搜索到的结果有三种，SSR、编译时打包、以及运行时引入。其实我有想过通过iframe进行实现，但最终也只是想了想。如果真这样，无谓的增加了系统复杂性不说，是不是XSS大法又该重出江湖了。 考虑到要集成祖传系统的原因，最终我选择了nginx转发，并通过数据库配置路由，看似很蠢，但应该还是有效的。

而我所做的不过是把菜单及权限校验功能作为基础包导出，供各个子服务依赖。加上前一章所说的模块化动态加载，尽管这样做在进行服务间页面切换的时候会出现短暂的白屏，但却可为微前端框架的切换进行最大的准备，而且这样做的同时还提供了一个统一的UI库。至于真正的微前端框架，那就来日方长吧……

核心代码

// package.json
{
  "scripts": {
    "deploy": "babel src -d dist --copy-files && npm publish"
  },
  "main": "dist/index.js",
  "devDependencies": {
    "@babel/cli": "^"
  },
  "publishConfig": {
    "registry": ""
  }
}

// .babelrc.js
module.exports = {
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Demo

// index.js
import 'XXX-react-admin-template';