阿里云 One Console 与 XConsole 深度解析：从后端统一到前端微前端的控制台演进之路#

1
// @alicloud/console-components - 内置设计规范的统一组件库
2
import { Button, Table, Form, Dialog } from '@alicloud/console-components';
3

4
// console-base - 全局布局组件
5
import { Topbar, Sidebar, Nav } from '@alicloud/console-base';

1
┌─────────────────────────────────────────────────┐
2
│                   Host App (主应用)               │
3
│  ┌─────────────────────────────────────────────┐ │
4
│  │  console-base (全局布局)                     │ │
5
│  │  ┌─────────┐ ┌──────────┐ ┌──────────────┐ │ │
6
│  │  │ Topbar  │ │ Sidebar  │ │  Messenger   │ │ │
7
│  │  └─────────┘ └──────────┘ │  (通信机制)    │ │ │
8
│  │                          └──────────────┘ │ │
9
│  └─────────────────────────────────────────────┘ │
10
│  ┌────────────┐  ┌────────────┐  ┌────────────┐ │
11
│  │  微应用 A   │  │  微应用 B   │  │  微应用 C   │ │
12
│  │  (独立沙箱) │  │  (独立沙箱) │  │  (独立沙箱) │ │
13
│  └────────────┘  └────────────┘  └────────────┘ │
14
└─────────────────────────────────────────────────┘

1
// 简化的沙箱创建逻辑
2
function createSandbox() {
3
  // 创建同源 iframe（不可见）
4
  const iframe = document.createElement('iframe');
5
  iframe.style.display = 'none';
6
  document.body.appendChild(iframe);
7

8
  // 提取 contentWindow 上的原生对象
9
  const sandboxWindow = iframe.contentWindow;
10

11
  // 用 Proxy 包装，拦截全局对象访问
12
  const sandboxProxy = new Proxy(sandboxWindow, {
13
    get(target, prop) {
14
      // 子应用访问的全局对象来自沙箱，而非真实 window
15
      return target[prop];
16
    },
17
    set(target, prop, value) {
18
      target[prop] = value;
19
      return true;
20
    }
21
  });
22

23
  return sandboxProxy;
24
}

1
// Webpack 插件在构建时生成的包裹代码（简化）
2
;(function(window, document, location) {
3
  // 子应用的原始代码
4
  // 此处 window 是沙箱 Proxy，而非真实 window
5
})(sandboxProxy, sandboxProxy.document, sandboxProxy.location);

1
{
2
  "name": "ecs-console",
3
  "entry": "//cdn.example.com/ecs-console/index.js",
4
  "styles": ["//cdn.example.com/ecs-console/index.css"],
5
  "scripts": ["//cdn.example.com/ecs-console/vendor.js", "//cdn.example.com/ecs-console/index.js"]
6
}