企业官网建设流程全解析

OHIF 视频教程全解：使用 OHIF CLI 创建、链接与发布 Mode 和 Extension 的完整工作流

【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers

OHIF v3 采用 Mode（应用场景）+ Extension（功能扩展）的模块化架构，而cli工具贯穿了从项目脚手架生成、本地开发链接、NPM 发布到安装集成、提交官方收录的全生命周期。本篇技术指南以 OHIF 官方开发文档《Video Tutorials》为骨架，结合 OHIF CLI 参考文档 与 platform/cli 的真实源码实现，系统梳理六部官方视频教程背后的技术脉络，读完你将掌握：如何用一条命令创建 Mode/Extension 模板、如何将本地包链接进 Viewer 用于开发、如何发布到 NPM 并通过add-mode/add-extension安装，以及如何向 OHIF 官方提交一个 Mode。

一、为什么需要一套"视频教程"式的工作流

OHIF v3 的架构被重新设计为"可扩展的应用平台"：Mode描述一个具体的临床使用场景（例如常规阅片longitudinal、分割segmentation、TMTV 定量分析tmtv），Extension则为场景提供底层能力（例如cornerstone渲染、measurement-tracking测量追踪、dicom-pdf文档显示）。在 modes 与 extensions 目录下可以看到这种划分的直接体现。

随之而来的核心问题便是：如何创建、移除、安装、卸载一个 Mode 或 Extension？官方给出的答案是 monorepo 内置的cli脚本，并用六部连续编排的视频演示了从零到一再到"被官方收录"的完整闭环。这六部视频前后承接：第一、二部创建并链接的 Mode 与 Extension，会在第三、四部被发布到 NPM，第五部再将这些已发布的实体装回 OHIF，最后第六部演示提交 Mode 进入 OHIF 的 Mode 画廊。

下文将按视频顺序逐一拆解其背后的命令、参数与源码原理。

二、视频一：创建并链接一个 Mode

第一部视频演示了 Mode 的创建与链接。对应 CLI 命令为：

pnpm run cli create-mode

该命令会在你指定的目录生成一套 Mode 模板，并通过交互式问答收集信息，最终写入模板package.json的元数据。从 createPackage.js 的源码可以看出，创建过程由Listr任务列表串行完成：复制模板文件 → 编辑 package.json → 生成 LICENSE → 生成 README →（可选）初始化 Git 仓库，全部成功后终端会提示你执行链接命令：

pnpm run cli link-mode "<targetDir>"

这意味着create-mode只负责生成模板，要让 Viewer 真正使用它，必须手动链接。

2.1 交互式问答的完整字段与默认值

问答环节由 questions.js 定义，分为两组：

路径相关（先问）：

仓库信息（路径确认后问）：

官方建议：除非你在开发核心 Mode，否则不要使用 OHIF 的./modes目录作为目标路径（这是开发工作区，避免与内置包混在一起）。带默认值的问题直接回车即可使用默认答案。

2.2 链接的底层原理：pnpm link + Webpack 外部依赖

link-mode/link-extension由 linkPackage.js 实现，其工作分为三步：

1. 校验包类型：读取目标包package.json的keywords，必须包含对应的关键字（Extension 需ohif-extension、Mode 需ohif-mode），否则直接抛错xxx is not mode/extension；
2. 执行pnpm link：切换到 monorepo 根目录运行pnpm link <resolvedPackageDir> --config.frozen-lockfile=false（链接会变更 lockfile，因此关闭 frozen-lockfile）；
3. 更新 Webpack 配置：将链接包的node_modules路径追加到 platform/app/.webpack/webpack.pwa.js 的modules数组，使 Webpack 在解析外部依赖时能找到链接包的 node_modules，随后用 Prettier 格式化该配置文件。

这正是"外部依赖"机制的核心：CLI 会把外部依赖路径写进 Webpack 配置，你的自定义 Extension/Mode 因此可以直接使用它们。链接完成后，CLI 还会把包名与版本写入插件配置文件。

三、视频二：创建并链接一个 Extension，并让 Mode 引用它

第二部视频创建并链接一个 Extension，同时修改第一部视频中的 Mode，使其引用该 Extension。创建命令为：

pnpm run cli create-extension

其流程与create-mode完全对称（同一套createPackage逻辑，仅packageType不同），链接则使用：

pnpm run cli link-extension "<extensionDir>"

3.1 Mode 如何声明对 Extension 的依赖

视频中"修改 Mode 引用 Extension"的落点是 Mode 包的package.json中的peerDependencies字段。这一点在add-mode的依赖解析逻辑中被直接利用：当 Mode 声明了 Extension 作为 peer 依赖时，安装该 Mode 会自动把对应 Extension 一并加入 Viewer（详见本文第五节）。

四、视频三与四：将 Extension 与 Mode 发布到 NPM

第三、四部视频分别演示如何把第二步创建的 Extension 与第一步创建的 Mode 发布到 NPM。发布动作本身使用标准 npm 发布流程，但有一个前提条件：包的package.json中必须带有正确的keywords标记——Mode 需要包含ohif-mode，Extension 需要包含ohif-extension。

这个标记并非摆设，而是 CLI 的"验货标准"：

• 在link时，linkPackage.js 会检查packageJSON.keywords是否包含对应关键字，否则拒绝链接；
• 在add-mode/add-extension时，validate.js 会验证 NPM 包，Mode 必须带有ohif-mode关键字才被允许安装。

也就是说，发布前确保 keywords 正确，是包能被 OHIF CLI 识别与安装的前提，这也是视频教程把"创建 → 发布"串成链路的衔接点。

五、视频五：从 NPM 添加 Mode 到 OHIF

第五部视频演示将发布到 NPM 的 Mode 与 Extension 安装回 OHIF。命令为：

pnpm run cli add-mode <packageName> [version] pnpm run cli add-extension <packageName> [version]

不指定version时默认安装最新版。官方文档给出的示例是@ohif-test/mode-clock——一个只带"显示时钟"面板的演示 Mode，安装后 Viewer 即出现新模式。

视频中特别强调：由于 Mode 引用了 Extension，一条add-mode命令会同时把两者都装上。其原理可以从 addMode.js 的源码中看到完整的任务流水线：

1. validateMode：搜索 NPM 并校验包（关键词必须是ohif-mode）；
2. installNPMPackage：安装对应版本的 npm 包；
3. addModeToConfig：通过getYarnInfo获取包的版本信息，写入插件配置文件；
4. findRequiredOhifExtensionsForMode：解析 Mode 包的 peerDependencies，找出其依赖的所有 OHIF Extension（实现在 findRequiredOhifExtensionsForMode.js）；
5. 若检测到依赖的 Extension，自动调用 addExtensions.js 依次安装。

add-extension则更简单，只需 校验 → 安装 → 写入配置 三步（见 addExtension.js）。

5.1 插件配置：PluginConfig.json

所有上述命令背后都依赖一个由 CLI自动生成的配置文件PluginConfig.json。官方明确要求：不需要也不应该手动编辑它，它由 CLI 全权维护，记录了 Viewer 当前使用的所有 Extension/Mode 及其版本。

以本仓库为例，platform/app/pluginConfig.json 展示了真实结构：extensions数组列出@ohif/extension-default、@ohif/extension-cornerstone、@ohif/extension-measurement-tracking等 14 个扩展（部分带version字段，default: false表示非默认启用）；modes数组列出@ohif/mode-longitudinal、@ohif/mode-basic、@ohif/mode-segmentation、@ohif/mode-tmtv等 9 个模式；此外还有public段记录需要对外暴露的静态资源目录或 CDN 包。

list命令正是读取该文件来列出已安装的插件：

pnpm run cli list

remove-mode/remove-extension则反向操作：卸载 npm 包并从配置中移除。其中remove-mode还会通过 findOhifExtensionsToRemoveAfterRemovingMode.js 检查并移除仅被该 Mode 使用的 Extension，避免残留孤儿依赖。

六、视频六：向 OHIF 提交一个 Mode

第六部视频演示如何将 Mode 提交给 OHIF，使其出现在 OHIF 的 Mode 画廊中。提交是社区协作环节：你需要将 Mode 包发布到 NPM（满足ohif-mode关键词等校验），然后按 OHIF 的贡献流程向项目提交，具体协作规范可参考 CONTRIBUTING.md。仓库中的 modes/basic、modes/longitudinal 等目录即为内置官方 Mode 的典型参考实现。

七、CLI 命令速查与使用约束

7.1 完整命令清单

在 monorepo 根目录执行以下命令可查看全部可用命令：

pnpm run cli --help

输出如下（v3.11 文档与当前源码均一致的命令集）：

OHIF CLI Options: -V, --version output the version number -h, --help display help for command Commands: create-extension Create a new template extension create-mode Create a new template Mode add-extension <packageName> [version] Adds an ohif extension remove-extension <packageName> removes an ohif extension add-mode <packageName> [version] Removes an ohif mode remove-mode <packageName> Removes an ohif mode link-extension <packageDir> Links a local OHIF extension to the Viewer to be used for development unlink-extension <extensionName> Unlinks a local OHIF extension from the Viewer link-mode <packageDir> Links a local OHIF mode to the Viewer to be used for development unlink-mode <extensionName> Unlinks a local OHIF mode from the Viewer list List Added Extensions and Modes search [options] Search NPM for the list of Modes and Extensions help [command] display help for command

各命令速查表：

search支持-v, --verbose标志展示更详细的结果信息（如版本、描述等）。

7.2 运行前提与注意事项

• 必须在 monorepo 根目录运行：从 index.js 源码可见，CLI 启动时会读取根目录package.json并校验其name是否为ohif-monorepo-root，否则报错ohif-cli must run from the root of the OHIF platform并退出；
• 关于包管理器：v3.11 时代的文档以yarn run cli描述，而当前仓库已切换为 pnpm 工作区（见 pnpm-workspace.yaml），源码与提示信息均使用pnpm run cli，请以仓库现状为准；
• link系列命令要求目录真实存在，否则会提示The Mode/Extension directory does not exist并退出；unlink之后 CLI 会提示需要重新运行pnpm install；
• 安装前校验：cli会验证 npm 包，Mode 必须包含ohif-mode关键字，Extension 必须包含ohif-extension关键字；
• 开发期的create+link组合正是视频一、二的精髓：先脚手架生成，再链接进 Viewer 热开发，无需发布即可联调。

八、进阶：私有 NPM 仓库与外部依赖

视频教程默认使用公共 NPM registry，若你的 Mode/Extension 托管在私有仓库，CLI 同样支持。步骤如下：

npm login npm token create --read-only export NPM_TOKEN=<your readonly token>

即创建一个只读 token 并以环境变量NPM_TOKEN导出（也可以直接导出已有的 npm token），CLI 即能访问私有仓库。

此外，正如第二节所述，ohif-cli会把外部依赖路径写入 platform/app/.webpack/webpack.pwa.js 的 Webpack 配置，这样你就可以在自己的项目里安装这些外部依赖，并在自定义 Extension/Mode 中直接使用——这也是视频二"Mode 引用 Extension"在构建层面的落地保障。

九、总结

六部视频教程构成了一条完整的 OHIF 扩展开发链路：创建（create）→ 本地链接（link）→ 发布（publish）→ 安装（add）→ 提交（submit）。其背后的 CLI 通过交互式模板生成、pnpm link + Webpack 外部依赖注入、NPM 包关键词校验、peerDependencies 依赖解析以及PluginConfig.json自动维护，将这条链路全部命令化、自动化。

对开发者而言，日常开发最常用的是create-*与link-*；对外分发用publish+add-*；而list、search、remove-*则负责日常的查看与清理。结合 OHIF CLI 参考文档 与 platform/cli/src 源码，即可完全掌握这套工作流的所有细节。

【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers