前言

用 create-react-app工具创建出来的 react 应用接入 qiankun的说明
create-react-app工具创建出来的 react 应用使用 react-scripts核心包进行 dev 和 build。react-scripts工具是基于 webpack打包工具的，将 webpack的配置都封装到了包里面。如果想更改或新增 webpack 配置的话，有两种方式可供选择：

  1. 运行npm run eject命令，将 react-scripts包里对 webpack 的配置都拿出来进行修改和新增。
  2. 使用 react-app-rewired和 customize-cra包扩展 webpack 配置。

这里选择了第二种方式配置。

导出生命周期

  1. let root: any = null;
  3. function render(props: any) {
  4.   const { container } = props;
  5.   root = ReactDOM.createRoot(
  6.     // 容器限制查找范围
  7.     container ? container.querySelector('#root') : document.getElementById('root') as HTMLElement
  8.   );
  9.   root.render(
  10.     <React.StrictMode>
  11.       <RouterProvider router={router}></RouterProvider>
  12.     </React.StrictMode>
  13.   );
  14. }
  16. if (!window.__POWERED_BY_QIANKUN__) {
  17.   render({});
  18. }
  20. // 导出生命周期
  21. export async function bootstrap() {
  22.   console.log('[react16] react app bootstraped');
  23. }
  25. export async function mount(props: any) {
  26.   console.log('[react16] props from main framework', props);
  27.   render(props);
  28. }
  30. export async function unmount() {
  31.   root.unmount();
  32.   root = null;
  33. }

配置路由 base

  1. const router = createBrowserRouter([
  2.   {
  3.     path: "/",
  4.     element: <App />,
  5.     children: [
  6.       {
  7.         path: "contacts/:contactId",
  8.         element: <Contact />
  9.       }
  10.     ]
  11.   }
  12. ], {
  13.   // 配置路由 base
  14.   basename: window.__POWERED_BY_QIANKUN__ ? '/app2' : '/'
  15. });

配置 webpack

配置资源路径

qiankun 在加载子应用的资源的时候由于子应用资源是 /xx/x这样的路径，会自动拼接主应用的域名导致资源加载 404。qiankun 有提供一个运行时的变量 window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__，该值为加载的子应用的域名地址。修改打包工具的资源动态 base 即可。
在 src 目录新增 public-path.ts

  1. // public-path.ts
  3. if (window.__POWERED_BY_QIANKUN__) {
  4.     //@ts-ignore
  5.     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  6. }
  8. export {}

安装工具包和修改script

  1. 安装修改 cra webpack 配置的工具包

    1. npm i -D react-app-rewired customize-cra

  2. 创建 config-override.js文件并进行如下配置： ```javascript const { name } = require(‘./package’); const { override, overrideDevServer } = require(“customize-cra”);

module.exports = { webpack: override((config) => { // 配置入口导出时挂载的全局变量的名字 config.output.library = ${name}-[name]; // 配置打包格式为 umd config.output.libraryTarget = ‘umd’; // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal config.output.chunkLoadingGlobal = webpackJsonp_${name}; // 配置全局变量为浏览器的 window config.output.globalObject = ‘window’;

  1.     return config;
  2. }),
  3. devServer: overrideDevServer((config) => ({
  4.     ...config,
  5.     headers: {
  6.         // 配置允许跨越
  7.         "Access-Control-Allow-Origin": "*",
  8.     },
  9. })),

}

  2. 3. 修改 `package.json`
  3. ```json
  4. {
  5.   "scripts": {
  6.     "start": "react-app-rewired start",
  7.     "build": "react-app-rewired build",
  8.     "test": "react-scripts test",
  9.     "eject": "react-scripts eject"
  10.   }
  11. }

参考

Create React App 入门及 webpack 配置