WU / 文档通用微前端
中文

WU CLI 的作用

了解 CLI 如何准备 WU 项目,并从第一个应用一路支持到生产文件。

版本、变更与要求见 Framework 3.2 与 CLI 1.0。

WU CLI 是用于准备和开发 WU 项目的终端工具。通过 wu 命令,你可以创建汇集应用的页面、添加应用、启动开发,并构建用于发布的文件。

它替你完成的工作

React 应用和 Vue 应用各有自己的组件、依赖和编译命令。要把它们一起显示,还需要一个 shell:负责预留空间并决定何时显示各应用的页面。

CLI 生成这一结构,并在 wu.config.json 中保存 shell 与应用的关系。汇集它们的目录称为 workspace。在根目录可以安装项目依赖、通过同一 HTTP origin 访问开发环境,并将构建汇总到 dist/。

CLI 与框架各有职责

工具 使用位置 作用
@wu-framework/cli 在终端通过 wu 使用 生成文件、安装依赖、开发并构建项目。
wu-framework 在应用代码中使用 加载并挂载应用,协调事件、状态、调用和权限。

CLI 准备用户打开的项目;项目发布后,运行时仍负责协调各应用。如果尚不了解 app、shell 和 runtime 的关系,请先阅读什么是 WU。

常见流程

从一个应用开始,确认它能在 shell 中显示。熟悉项目各部分后,再添加更多应用。

步骤 命令 应确认的结果
创建 wu create 一个包含 shell、首个微应用和 wu.config.json 的目录。
安装 wu install 项目命令所需的依赖已准备好。
开发 wu dev 开发期间可在浏览器访问 shell 和应用。
添加另一个应用 wu add <framework> <name> 新的应用目录及其配置条目。
构建 wu build 生产文件汇总到 dist/。
检查生产结果 wu serve 4100 通过本地 HTTP 提供 dist/ 内容。

构建前可以重复添加 → 需要时安装 → 开发流程。wu add 默认尝试安装;使用 --no-install 可推迟到运行 wu install 时再安装。

wu serve 用于检查构建结果。发布时,将 dist/ 文件交给托管平台;CLI 不包含 deploy 命令。

逐步操作

  1. 第一个应用:准备环境、生成 shell,并在浏览器确认微应用。
  2. 添加另一个应用:接入另一个框架,并区分它与首个应用的文件。
  3. 准备生产版本:构建、提供结果,并检查准备发布的内容。

CLI 1.2.0 模板声明 wu-framework: ^4.0.0。参阅安装与版本。

在项目中修改哪些位置

文件或目录 其中的内容
wu.config.json shell 与应用的关系、各自命令和 workspace 选项。
shell/ 宿主页面及其导航。
mf-*/ 各微应用的组件和依赖。
dist/ wu build 的结果,可供检查和发布。

编辑 shell/ 或对应微应用的源码。每次构建都会重新生成 dist/。配置介绍 wu.config.json 字段;创建和添加详述生成器选项。

需要查阅命令时

使用 wu --help 查看常规帮助,使用 wu --version 检查版本。检查项目时,wu info 显示检测到的配置,wu doctor检查其一致性。

命令参考汇总参数、结果和限制。本文所述版本识别以下选项:

CLI 包含 wu catalog 用于查看生成版本,以及 wu upgrade 用于迁移现有清单和模板。wu update 更新 CLI;wu upgrade 准备项目;wu install 安装依赖。请参阅迁移流程。

一起完善 WU

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

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