# Micro-Frontends-practice

**Repository Path**: ggpan/Micro-Frontends-practice

## Basic Information

- **Project Name**: Micro-Frontends-practice
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-28
- **Last Updated**: 2021-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微前端实践
基于qiankun(https://github.com/umijs/qiankun)

主要细化qiankun example，希望我踩过的坑大家能跳过去，节省时间~

***根据qiankun更新进度不定时修改完善***

有帮助的话别忘了start(https://github.com/CHU295/Micro-Frontends-practice)

# 目录介绍
项目目前编写了vue、react两种实现方式

根项目:main_react / main_vue

子项目:react_ / react_eject / vue / react_webpack

五个项目独立存在

请先运行子项目，再运行父项目

- ## 一、main_react 
> 根项目 create-react-app版本
1. 安装qiankun，`yarn add qiankun  # or npm i qiankun -S`
> 可选isomorphic-fetch
2. 修改src/App.js创建qiankun主框架
- ## 二、main_vue 
> 根项目 vue-cli搭建版本
1. 安装qiankun，`yarn add qiankun  # or npm i qiankun -S`
> 可选isomorphic-fetch
2. 修改src/main.js创建qiankun主框架

- ## 三、react_ 
**子项目 create-react-app版本**
>采用react-app-rewired修改webpack相关配置
1. 安装react-app-rewired 

`npm install react-app-rewired --save-dev`

2. 修改package.josn文件scripts命令，替换react-scripts为react-app-rewired
```
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},
```
3. 添加 config-overrides.js 文件到根目录
> 可添加.env配置端口等等
4. 修改src/index.js导入生命周期

- ## 四、react_eject
**子项目  create-react-app版本**
>与上一个不同，本项目使用eject命令展开了默认配置

1. 修改src/index.js导入生命周期
2. 修改config/webpack.config.js，output新增参数。注意参数写法
```
library: `${appPackageJson.name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${appPackageJson.name}`,
```
3. 按需修改config/webpackDevServer.config.js，一般只需添加header允许跨域等等
```
headers: {
  'Access-Control-Allow-Origin': '*',
},
```

- ## 五、vue 
**子项目  vue-cli搭建版本**

1. vue-cli生成后根目录添加vue.config.js文件
2. 修改src/main.js导入生命周期

- ## 六、react_webpack
**子项目  webpack 简易搭建的react项目**


# 特殊说明
1. 注意挂载的节点id，子父不得同名。
例：子父皆为react项目，同时挂在到#root

---
## 雷点
1. 运行过程中修改create-react-app子项目，强刷根项目可能会报错缺少生命周期，重启子项目即可