跳转到主文档

开发微前端

本章将把中后台项目，改造成一个微前端项目。本章对应的代码仓库地址在这里查看。

通过本章你可以了解到：

  • 如何创建微前端项目的主应用、子应用。
  • 微前端项目开发的基本流程。
  • 如何调试微前端项目。

创建​

首先我们先创建三个应用：

  • main 主应用
  • dashboard 子应用
  • table 子应用

创建 main 主应用​

使用 @modern-js/create 创建新项目，运行命令如下：

npx @modern-js/create main
注

main 为创建的项目名。

按照如下选择，生成项目：

? 请选择你想创建的工程类型： 应用
? 请选择开发语言： TS
? 请选择包管理工具： pnpm
? 是否需要支持以下类型应用： 不需要
? 是否需要调整默认配置： 否

使用 pnpm new 选择 「开启微前端」

配置 modern.config.js：

modern.config.js
export default defineConfig({
  runtime: {
    router: true,
    state: true,
    masterApp: {
      manifest: {
        modules: [
          {
            name: 'Dashboard',
            entry: 'http://localhost:8081',
          },
          {
            name: 'TableList',
            entry: 'http://localhost:8082',
          },
        ],
      },
    },
  },
});

创建 dashboard 子应用​

使用 @modern-js/create 创建新项目，运行命令如下：

npx @modern-js/create dashboard
注

dashboard 为创建的项目名。

按照如下选择，生成项目：

? 请选择你想创建的工程类型： 应用
? 请选择开发语言： TS
? 请选择包管理工具： pnpm
? 是否需要支持以下类型应用： 不需要
? 是否需要调整默认配置： 否

使用 pnpm new 选择 「开启微前端」

配置 modern.config.js：

modern.config.js
export default defineConfig({
  runtime: {
    router: true,
    state: true,
  },
  deploy: {
    microFrontend: true,
  },
});

创建 table 子应用​

使用 @modern-js/create 创建新项目，运行命令如下：

npx @modern-js/create table
注

table 为创建的项目名。

按照如下选择，生成项目：

? 请选择你想创建的工程类型： 应用
? 请选择开发语言： TS
? 请选择包管理工具： pnpm
? 是否需要支持以下类型应用： 不需要
? 是否需要调整默认配置： 否

使用 pnpm new 选择 「开启微前端」

配置 modern.config.js：

modern.config.js
export default defineConfig({
  runtime: {
    router: true,
    state: true,
  },
  deploy: {
    microFrontend: true,
  },
});

迁移代码​

main​

修改 App.tsx：

import { Switch, Route, Link } from '@modern-js/runtime/router';
import { useModuleApps } from '@modern-js/plugin-garfish';

import './App.css';

const App: React.FC = () => {
  const { Dashboard, TableList } = useModuleApps();

  return (
    <div>
      <div>
        <Link to="/dashboard">Dashboard</Link> &nbsp;
        <Link to="/table">Table</Link>
      </div>
      <Switch>
        <Route path="/dashboard" exact={true}>
          <Dashboard />
        </Route>
        <Route path="/table">
          <TableList />
        </Route>
      </Switch>
    </div>
  );
};

export default App;

dashboard​

修改 App.tsx：

export default () => {
  return <div>Dashboard Page</div>;
};

table​

将开发中后台中的 console 组件下的代码复制过来。

console/tableList/models/tableList.tsx ---> src/models/tableList.tsx

src/models/tableList.tsx
import { model } from '@modern-js/runtime/model';

type State = {
  data: {
    key: string;
    name: string;
    age: string;
    country: string;
    archived: boolean;
  }[];
};

export default model<State>('tableList').define({
  state: {
    data: [],
  },
  actions: {
    load: {
      fulfilled(state, payload) {
        state.data = payload;

        return state;
      },
    },
  },
  effects: {
    async load() {
      const data = (
        await fetch(
          'https://lf3-static.bytednsdoc.com/obj/eden-cn/beeh7uvzhq/users.json',
        )
      ).json();
      return data;
    },
  },
});

console/tableList/index.tsx ---> src/App.tsx

src/App.tsx
import React, { useEffect } from 'react';
import { Table } from 'antd';
import { useModel } from '@modern-js/runtime/model';
import tableListModel from './models/tableList';

const TableList: React.FC = () => {
  const [{ data }, { load }] = useModel(tableListModel);

  useEffect(() => {
    load();
  }, []);

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Country',
      dataIndex: 'country',
      key: 'country',
    },
  ];

  return (
    <div>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};

export default TableList;

调试​

分别启动 main、dashboard、 table

  • main - http://localhost:8080
  • dashboard - http://localhost:8081
  • table - http://localhost:8082

访问主应用地址 http://localhost:8080，效果如下：

demo

微前端子应用模式​

上面的调试演示需要在本地分别启动主应用、和子应用，作为独立负责大型项目中一个子应用开发的团队/个人来说，需要在本地启动庞大的主应用，以及可能需要启动其它相关子应用进行调试，使得开发体验降低。

Modern.js 中支持使用线上的主应用来调试本地子应用，首选需要配置主应用开启调试模式：

modern.config.js
export default defineConfig({
  runtime: {
    // ...
  },
  server: {
    enableMicroFrontendDebug: true,
  },
});

配置 server.enableMicroFrontendDebug 为 true 开启线上调试模式。

假设主应用线上域名为 http://master.example.com，当前 TableList 服务启动在 http://localhost:8082

访问 http://master.example.com?__debug__micro-frontend-module-name=TableList&__debug__micro-frontend-module-entry=http://localhost:8082，在跳转到 /table 路由的时候，将会加载本地的子应用资源。

除了通过 Query 的方式传递子应用调试信息，Modern.js 也支持 Mock Header 的方式，更多信息请看 微前端子应用调试

部署​

提示

近期上线，敬请期待。