微前端架构实现示例
动机
希望找到一种方式共用代码, 避免重复开发, 并且不限制技术栈(包括vue和react);
如果使用的是同一个技术栈, 组件化应该是更好的方式.
使用到的框架或工具
- single-spa 一个用于前端微服务化的JavaScript前端解决方案
- verdaccio 用于搭建npm仓库
如果对single-spa不熟悉, 请先查看single-spa文档
启动项目
搭建私有npm仓库
私有npm仓库用于存放子应用npm包, 关于什么是子应用, 后面会讲到
本示例使用docker安装在本地, 正式的项目中, 私有npm仓库应该在服务器上:
# 拉取verdaccio
docker pull verdaccio/verdaccio
# 启动verdaccio
docker run --name verdaccio -p 4873:4873 -v $(pwd)/storage:/verdaccio/storage -v $(pwd)/conf:/verdaccio/conf verdaccio/verdaccioconf中的文件可以从docker-local-storage-volume中得到.
更多安装方式请访问: verdaccio
安装子应用依赖并发布到私有npm仓库
# termail 1
cd react-app1
yarn
yarn publish-script
# 发布地址由项目的package.json文件中的publishConfig.registry字段指定
# 这里我们指定为我们搭建的私有npm仓库的地址# termail 2
cd vue-app1
yarn
yarn publish-script# termail 3
cd vue-app1
yarn
yarn publish-script主应用安装依赖并启动
cd main-app__vue
# 需要拉取子应用npm包, 所以需要设置registry
yarn --registry=http://127.0.0.1:4873
yarn serve打开浏览器, 访问http://127.0.0.1:8080
应用说明
- main-app__vue (vue应用, 使用vue-cli3生成)
- react-app1 (app应用, 使用create-react-app生成)
- vue-app1 (vue应用, 使用vue-cli2生成)
- vue-app2 (vue应用, 使用vue-cli3生成)
main-app__vue我们这里称它为主应用, react-app1、 vue-app1、vue-app2我们称为子应用.
子应用可以理解为一个晓得模块, 主应用负责使用和协调子应用.
它们之间就使用关系结构如下:
页面中或者说代码的关系如下:
