新手求助：基于create-react-app实现基础微前端的最简方案

问题描述 #

我想做一个能加载小型应用（比如Hello World）的容器应用，了解到微前端概念，但作为新手看了YouTube视频还是没找到有效的实现方法。我用npx create-react-app创建了container-app和child-app（容器应用目录下包含子应用），之前尝试直接动态导入子应用源码的方式行不通，希望能得到最简的微前端实现方式。

最简实现步骤 #

1. 修改子应用，暴露渲染方法 #

调整child-app/src/index.js，让子应用对外提供一个可调用的渲染函数，同时保留本地开发的正常渲染逻辑：

// child-app/src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 暴露给容器应用的渲染方法，接收容器ID作为参数
export const renderChildApp = (containerId) => {
  const root = ReactDOM.createRoot(document.getElementById(containerId));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
};

// 本地开发时，直接渲染到默认的root容器
if (process.env.NODE_ENV === 'development') {
  renderChildApp('root');
}

2. 打包子应用为UMD格式 #

在child-app的package.json中添加自定义打包脚本，将编译后的主JS文件重命名为更易识别的UMD包：

{
  "scripts": {
    "build": "react-scripts build",
    "build:umd": "react-scripts build && mv build/static/js/main.*.js build/child-app.umd.js"
  }
}

执行命令打包子应用：

npm run build:umd

打包完成后，child-app/build目录下会生成child-app.umd.js文件。

3. 改造容器应用，动态加载子应用 #

1. 在container-app/public目录下创建child-app文件夹，将child-app/build/child-app.umd.js复制到这个新目录中。
2. 修改container-app/src/ContainerApp.js，通过动态创建脚本的方式加载子应用，并调用其暴露的渲染方法：

// container-app/src/ContainerApp.js
import React, { useState } from 'react';

function ContainerApp() {
  const [isChildLoaded, setIsChildLoaded] = useState(false);

  const loadChildApp = async () => {
    try {
      // 动态创建script标签加载子应用UMD包
      const script = document.createElement('script');
      script.src = '/child-app/child-app.umd.js';
      script.onload = () => {
        // 调用子应用暴露的渲染方法，指定渲染容器
        window.renderChildApp('child-app-container');
        setIsChildLoaded(true);
      };
      document.body.appendChild(script);
    } catch (error) {
      console.error('加载子应用失败:', error);
    }
  };

  return (
    <div>
      <h1>容器应用</h1>
      <button onClick={loadChildApp}>加载子应用</button>
      {/* 子应用的渲染容器 */}
      <div id="child-app-container"></div>
      {isChildLoaded && <p>子应用已加载完成！</p>}
    </div>
  );
}

export default ContainerApp;

4. 运行测试 #

在container-app目录下执行启动命令：

npm start

访问http://localhost:3000，点击「加载子应用」按钮，即可看到子应用被成功渲染到容器中。

关键说明 #

你之前尝试直接导入子应用源码的方案不生效，是因为create-react-app的默认webpack配置会将每个项目视为独立编译单元，跨项目的源码导入会触发模块解析和编译错误。通过将子应用打包为UMD格式，我们把它变成了一个独立的可加载脚本，容器应用可以通过动态加载脚本的方式调用其暴露的方法，这是最轻量化的微前端隔离实现方式，不需要引入复杂的微前端框架。

内容的提问来源于stack exchange，提问作者Aiwin Raj