qiankun微前端实践

一、创建qiankun主项目

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

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

  // 默认 <div id="root"></div>
  <div id="main-root"></div>

1.引入react-app-rewired

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

2.配置多环境

安装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"
  },
  // ...
}

3.配置proxy

开发环境下跨域问题，前端一般用本地的devServer设置代理

安装http-proxy-middleware：

npm i http-proxy-middleware --save-dev
或 
yarn add -D http-proxy-middleware

在src目录下新建文件setupProxy.js（注意：文件名不能修改！！cra会按照src/setupProxy.js这个路径解析）

setupProxy.js内容如下：

const {createProxyMiddleware} = require("http-proxy-middleware");

const appHost = `http://localhost:8090`;

module.exports = function (app) {
  app.use('/api', createProxyMiddleware({
    target: appHost,
    changeOrigin: true,
  }));
};

4.配置别名

在项目根目录下添加 config-overrides.js文件

const {
  override,
  addWebpackAlias
} = require('customize-cra')

const path = require('path')

module.exports = override(
  // 路径别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src')
  })
)

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

二、创建qiankun子项目

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