react16接入微前端到vue项目总结

1.vue主应用配置

// mian.js
const apps = [
    {
        name: 'react16',
        entry: '//localhost:3888', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
        container: '#react16',
        activeRule: '/rfmtools/#/react16'
    }
];
registerMicroApps(apps); // 注册应用
start(); //

1.1 url路径要和activeRule匹配上

1.2 主应用开个路由承载微应用

1.3 注意官网介绍 接入的微应用页面有子路由 要加*

1.4 开一个承载子应用的页面

命令改造

"scripts": {
        "install-all": "npm-run-all --serial install:*",
        "install:vue3": "cd qiankun/vue3 && yarn install",
        "install:react16": "cd qiankun/react16 && yarn install",
        "start": "npm-run-all --parallel start:*",
        "start:hf": "vue-cli-service serve",
        "start:vue3": "cd qiankun/vue3 && yarn serve",
        "start:react16": "cd qiankun/react16 && yarn dev",
        "build": "npm-run-all --parallel build:*",
        "dev": "vue-cli-service serve",
        "build:hf": "vue-cli-service build",
        "build:vue3": "cd qiankun/vue3 && yarn build",
        "build:react16": "cd qiankun/react16 && yarn build",
   }

2.微应用 react项目接入

// index.tsx
/// <reference path="index.d.ts" />
import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

function render(props) {
    const { container } = props;
    ReactDOM.render(
        <App />,
        container
            ? container.querySelector('#root')
            : document.querySelector('#root')
    );
}

function storeTest(props) {
    props.onGlobalStateChange(
        (value, prev) =>
            console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
        true
    );
    props.setGlobalState({
        ignore: props.name,
        user: {
            name: props.name
        }
    });
}

if (!window.__POWERED_BY_QIANKUN__) {
    render({});
}

export async function bootstrap() {
    console.log('[react16] react app bootstraped');
}

export async function mount(props) {
    console.log('[react16] props from main framework', props);
    storeTest(props);
    render(props);
}

export async function unmount(props) {
    const { container } = props;
    ReactDOM.unmountComponentAtNode(
        container
            ? container.querySelector('#root')
            : document.querySelector('#root')
    );
}

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

2.1 app.sx 改造下basename

basename={
            window.__POWERED_BY_QIANKUN__ ? '/rfmtools/#/react16' : '/'
        }

/*
 * @description:
 * @author: steve.deng
 * @Date: 2020-12-14 17:28:27
 * @LastEditors: steve.deng
 * @LastEditTime: 2020-12-28 17:02:41
 */
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
import { Divider } from 'antd';

import 'antd/dist/antd.min.css';
import './App.css';

import LibVersion from './components/LibVersion';
import HelloModal from './components/HelloModal';

import Home from './pages/Home';
const About = lazy(() => import('./pages/About'));

const RouteExample: React.FC = () => {
    return (
        <Router
            basename={
                window.__POWERED_BY_QIANKUN__ ? '/rfmtools/#/react16' : '/'
            }
        >
            <nav>
                <Link to="/">Home</Link>
                <Divider type="vertical" />
                <Link to="/about">about</Link>
            </nav>
            <Suspense fallback={null}>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/about" component={About} />
                </Switch>
            </Suspense>
        </Router>
    );
};

export default function App() {
    return (
        <div className="app-main">
            <LibVersion />
            <HelloModal />
            <Divider />
            <RouteExample />
        </div>
    );
}

// 改造下 .rescriptsrc.js
umd格式打包

/*
 * @description: 改造下 
 * @author: steve.deng
 * @Date: 2020-12-16 14:20:20
 * @LastEditors: steve.deng
 * @LastEditTime: 2020-12-28 17:08:58
 */
const { name } = require('./package');

module.exports = {
    webpack: config => {
        config.output.library = `${name}-[name]`;
        config.output.libraryTarget = 'umd';
        config.output.jsonpFunction = `webpackJsonp_${name}`;
        config.output.globalObject = 'window';
        // config.output.publicPath = '//localhost:3888/';
        config.output.publicPath =
            process.env.NODE_ENV === 'production' ? '/rfmtools_react/' : '/';

        return config;
    },

    devServer: _ => {
        const config = _;
        config.headers = {
            'Access-Control-Allow-Origin': '*'
        };
        config.historyApiFallback = true;
        config.hot = false;
        config.watchContentBase = false;
        config.liveReload = false;

        return config;
    }
};

记得安装react-scripts

package.json
{
    "name": "react16",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "rescripts start",
        "build": "rescripts build",
        "test": "rescripts test",
        "eject": "rescripts eject"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "dependencies": {
        "antd": "^3.25.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-router-dom": "^5.1.2"
    },
    "devDependencies": {
        "@rescripts/cli": "^0.0.14",
        "@types/node": "^14.14.14",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "react-scripts": "^3.4.1",
        "typescript": "^4.1.3"
    }
}

环境变量

.env

SKIP_PREFLIGHT_CHECK=true
BROWSER=none
PORT=3888
WDS_SOCKET_PORT=3888