qiankun微前端实践

微前端的好处：

1.技术栈无关，各个子项目可以自由选择框架，可以自己制定开发规范。
2.快速打包，独立部署，互不影响，升级简单。
3.可以很方便的复用已有的功能模块，避免重复开发。

创建qiankun主项目

npx create-react-app qiankun-main --template typescript
cd qiankun-main
yarn add qiankun # 或者 npm i qiankun -S

修改 index.html 挂载dom的默认id，防止与子应用id冲突

  // 默认 

  

引入react-app-rewired

create-creact-app项目，如果需要手动修改配置，需先npm run eject弹出配置，这个过程是不可逆的。
这里介绍使用react-app-rewired。它的作用是用来帮助你重写react脚手架配置。

安装：

npm i react-app-rewired --save-dev 
或
yarn add -D react-app-rewired 

在根目录下新建文件config-overrides.js文件

module.exports = {
   // 这里修改配置
}

修改package.json文件

{
  // ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  // ...
}

配置多环境

安装dotenv-cli

npm i dotenv-cli --save-dev 
或 
yarn add -D dotenv-cli 

在根目录下添加.env.dev文件，.env.sit文件，.env.prod文件
修改package.json文件

{
  // ...
  "scripts": {
    "start": "dotenv -e .env.dev react-app-rewired start",
    "build:sit": "dotenv -e .env.sit react-app-rewired build",
    "build:prod": "dotenv -e .env.prod react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  // ...
}

配置proxy

参考：http://wmm66.com/index/article/detail/id/165.html

创建react子项目

npx create-react-app qiankun-react --template typescript
cd qiankun-react
yarn add qiankun # 或者 npm i qiankun -S

照着上面一样，引入react-app-rewired和配置多环境

yarn add -D react-app-rewired
yarn add -D dotenv-cli 

在根目录下新建config-overrides.js，.env.dev，.env.sit，.env.prod，
修改package.json文件。

然后照着qiankun官方文档来配置子应用。
具体代码怎么写的不想多讲，可以参照我的git代码
地址：https://gitee.com/756585379/qiankun

创建vue子项目