WU / 文档通用微前端
中文

准备生产版本

构建 WU workspace、提供 dist 输出,并在发布前检查微应用。

检查待发布内容

开发时验证的是源码。现在生成托管环境将提供的文件,并在浏览器检查构建版本。

继续在第一个微应用的 mi-plataforma/ 根目录操作。若完成添加第二个应用,也会构建 Vue。一或两个应用使用相同命令。

1. 构建 workspace

按 Ctrl+C 停止开发服务器,然后运行:

wu build

等待成功完成。WU 将 Astro shell 和微应用构建汇集到 workspace 根目录的 dist/。该目录包含完整输出,shell/dist/ 只包含 shell。

使用 React 和 Vue 时,确认 dist/index.html 存在,且每个微应用都有目录:

dist/
├── index.html
├── apps.json
├── wu-manifest.json
├── assets/...
├── mf-mi-plataforma/
│   ├── wu.json
│   └── assets/...
└── mf-inspector/
    ├── wu.json
    └── assets/...

如果只创建 React,不会有 mf-inspector/。构建可能添加其他文件,包括 HTTP 策略文件。各 wu.json 指向其应用构建入口。

命令失败时,先解决首个错误再继续。以前构建的 dist/ 可能仍存在,磁盘上看到它不证明最近一次构建成功。

2. 提供构建输出

在同一根目录运行:

wu serve 4100

保持终端打开,访问 http://127.0.0.1:4100。4100 是本次检查端口;若被占用,选择其他数字并打开对应 URL。

wu serve 提供 dist/ 文件。修改源码后,必须重新执行 wu build,检查结果才会包含这些变更。

3. 检查生产应用

  1. 确认 Overview、Welcome to WU 和已创建的应用名称。
  2. 打开 mi-plataforma,检查 React、应用名称和计数器:+ 使 0 → 1,− 返回 0。
  3. 若添加了 Vue,打开 inspector 并重复计数器检查。
  4. 返回 Overview,刷新页面,再次打开应用。
  5. 检查浏览器开发工具中没有 JavaScript 加载错误或 404 响应。

这些操作验证 shell 能找到构建应用,且组件正常工作。开发可用而此处应用为空时,检查资源路径和 manifest;生产构建解释如何检查输出。

完成后按 Ctrl+C 停止服务器。

发布并继续学习

dist/ 汇总内容是托管发布产物。发布前,按照提供服务与部署检查目标环境路由、样式和响应头。端口 4100 的测试验证本地输出,部署后还需检查公开 URL。

wu doctor 提供额外诊断,与刚完成的交互检查互为补充。

要让这些应用共享行为,继续 React 与 Vue 共享计数器。随后可以添加带客户端、提供方和权限的应用间求和。两个示例包含全部文件以及开发和生产检查。如何运行示例还汇集实验室和 Node 示例。

一起完善 WU

发现了问题?有新的想法?

你的使用体验能让 WU 变得更好。告诉我们遇到的问题,或支持项目的持续开发。