qiankun微前端实践

• qiankun 微前端方案实践
• • 创建qiankun主项目
  • 引入react-app-rewired
  • 配置多环境
  • 配置proxy
  • 创建react子项目
  • 创建vue子项目
  • 个人简介

微前端的好处：

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

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

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

  // 默认 
  

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

安装：

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

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

module.exports = override(config, env) {
  // do stuff with the webpack config...
  return config
}

修改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"
  },
  // ...
}

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

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

本人全栈开发，擅长java，react，go等语言，熟悉mysql，redis，kafka，es，docker等中间件，提供技术支持，运维服务，面试辅导等，有意者可以加我微信详聊：756585379