micro-front-end

今天来讲一下微前端，容器+服务S

1.配置容器container

// 项目配置的环境变量
REACT_APP_BROWSE_HOST=http://localhost:3001
REACT_APP_RESTAURANT_HOST=http://localhost:3002
REACT_APP_CONTENT_HOST=http://localhost:5000

// 容器的作用就是根据路由决定加载哪些服务
const {
  REACT_APP_BROWSE_HOST: browseHost,
  REACT_APP_RESTAURANT_HOST: restaurantHost,
} = process.env;

const Browse = ({ history }) => (
  <MicroFrontend history={history} host={browseHost} name="Browse" />
);
const Restaurant = ({ history }) => (
  <MicroFrontend history={history} host={restaurantHost} name="Restaurant" />
);
const Random = () => <Redirect to={`/restaurant/${getRandomRestaurantId()}`} />;

 <Switch>
        <Route exact path="/" component={Browse} />
        <Route exact path="/restaurant/:id" component={Restaurant} />
        <Route exact path="/random" render={Random} />
        <Route exact path="/about" render={About} />
 </Switch>

需要注意的是不同服务可能共享redux的全局state

2.重点来看路由如何导向不同的服务以及加载模式

// MicroFrontend代码
componentDidMount() {
    const { name, host, document } = this.props;
    const scriptId = `micro-frontend-script-${name}`;

    // 该脚本已经加载过
    if (document.getElementById(scriptId)) {
      this.renderMicroFrontend();
      return;
    }

    fetch(`${host}/asset-manifest.json`)
      .then(res => res.json())
      .then(manifest => {
        const script = document.createElement('script');
        script.id = scriptId;
        script.crossOrigin = '';
        script.src = `${host}${manifest['main.js']}`;
        script.onload = this.renderMicroFrontend;
        document.head.appendChild(script);
      });
  }

renderMicroFrontend = () => {
    const { name, window, history } = this.props;

    window[`render${name}`](`${name}-container`, history);
  };

其实上面很好理解，就是根据传入的name和host决定加载

3.来看服务如何编写

(window as any).renderBrowse = (containerId, history) => {
  ReactDOM.render(
    <App history={history} />,
    document.getElementById(containerId),
  );
};

// 注意因为无论任何路由 服务依托的组件是一样的 所以一定要销毁
(window as any).unmountBrowse = containerId => {
  ReactDOM.unmountComponentAtNode(document.getElementById(containerId));
};

4.将服务打包并用serve启动

"scripts": {
    "format": "prettier --write",
    "dev": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "start": "serve -l 3001 --cors build"
  }

注意要开启跨域

5.总结，该微前端的实现是利用了不用路由加载不同服务打包后的js，注意history和state在跨服务的共享

赏

谢谢你请我吃糖果