初识微前端

Posted 2021-07-10 lin_fightin

微前端

举个简单的例子，你本来有一个vue一个项目，当你匹配到/about，的时候，会渲染about这个组件。
微前端其实就是，在你匹配到/about的时候，允许你渲染另一个应用，可以是react，可以是vue，也可以是别的东西。
就是一个父项目，它可以支配很多子项目，父项目提供容器，当匹配到子项目时，渲染对应的子项目，提供沙盒机制，以防止对全局的污染，比如每个应用可能会污染window这个对象，使得react项目中的window对象还是vue项目影响过的window对象。沙盒机制可以解决这个问题，数据传输也有好几种方式，url啊，全局redux，event等等，父应用还可以通过监视子应用，当哪个子应用挂掉后，可以报警警示开发者。

SingleSpa

Single-spa-vue

在子应用安装
npm install single-spa-vue

安装两个vue项目，作为父子应用。
将子应用包装一层，然后导出三个方法，给父应用应用。

在配置下webpack，在开启服务的时候就可以通过window.singleVue.mount拿到。
然年打开夫应用。安装single-spa
这里我们是没有配置路由的，但是

先试验一下，

会执行第二个参数的代码。
当我们开启子应用的服务后

页面并不会显示内容，因为他被打包成库了，然后给window加上singleVue属性。
那么我们的父应用加载vue应用时实际上是加载app.js还有chunk-vendor.js这两个文件。所以

创建一个script标签，加载这两个js文件
这样基本就可以使用了。

css的分离

沙盒

这样相当于创建一个沙盒，外面的无法访问里面的，里面的无法改变外面的。


如果在家沙盒外呢


不会影响沙盒内部，相当于被隔离了。
shadow.attachShadow是dom的api，默认拿到id为shadow的沙盒。

这样写也是一样的。

快照沙盒隔离

qiankun

官网https://qiankun.umijs.org/zh/guide
父应用
cnpm install qiankun



vue子应用


不用安装任何库，这样就可以了。
那么子应用怎么自己启动呢。qiankun有提供一个属性

配置下打包成类库，并且解决跨域。

接着是react子应用的配置

这里为什么不用配置webpack的公共路径呢，
可以在.env的文件下配置，这个是配置react的环境变量的，这样的话就会按照20001的端口去找react的资源，
老方法：打包成类库

需要重写webpack配置，即安装react-app-rewired

执行三个项目


配置成功。
类似于快照沙盒，不会影响外部。
可通过props拿到数据。

实战。配下自己的两个项目