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

OHIF 视频教程全解:使用 OHIF CLI 创建、链接与发布 Mode 和 Extension 的完整工作流 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/ViewersOHIF 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 定量分析tmtvExtension则为场景提供底层能力例如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 定义分为两组路径相关先问问题默认值说明What is the name of your mode?my-mode包名必填空值会被校验拦截What is the target path to create your mode?—目标目录支持~自动展开为用户主目录并会与包名拼接成最终绝对路径Please confirm the above path...—确认路径输入N会重新询问仓库信息路径确认后问问题默认值说明Should it be a git repository?false是否立即git initShould it follow same prettier rules as OHIF?—是否采用与 OHIF 一致的 Prettier 规则What is the version of your mode?0.0.1版本号What is the description of your mode?空描述Who is the author of your mode?空作者What is your email address?空邮箱What is the license of your mode?MIT许可证官方建议除非你在开发核心 Mode否则不要使用 OHIF 的./modes目录作为目标路径这是开发工作区避免与内置包混在一起。带默认值的问题直接回车即可使用默认答案。2.2 链接的底层原理pnpm link Webpack 外部依赖link-mode/link-extension由 linkPackage.js 实现其工作分为三步校验包类型读取目标包package.json的keywords必须包含对应的关键字Extension 需ohif-extension、Mode 需ohif-mode否则直接抛错xxx is not mode/extension执行pnpm link切换到 monorepo 根目录运行pnpm link resolvedPackageDir --config.frozen-lockfilefalse链接会变更 lockfile因此关闭 frozen-lockfile更新 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 extensionDir3.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-modeExtension 需要包含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 的源码中看到完整的任务流水线validateMode搜索 NPM 并校验包关键词必须是ohif-modeinstallNPMPackage安装对应版本的 npm 包addModeToConfig通过getYarnInfo获取包的版本信息写入插件配置文件findRequiredOhifExtensionsForMode解析 Mode 包的 peerDependencies找出其依赖的所有 OHIF Extension实现在 findRequiredOhifExtensionsForMode.js若检测到依赖的 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 listremove-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各命令速查表命令作用示例create-mode生成 Mode 模板pnpm run cli create-modecreate-extension生成 Extension 模板pnpm run cli create-extensionlink-mode modeDir链接本地 Mode 用于开发pnpm run cli link-mode ./my-modeunlink-mode modeName解除本地 Mode 链接pnpm run cli unlink-mode my-modelink-extension extensionDir链接本地 Extensionpnpm run cli link-extension ./my-extunlink-extension extensionName解除本地 Extension 链接pnpm run cli unlink-extension my-extadd-mode packageName [version]从 NPM 安装 Modepnpm run cli add-mode ohif-test/mode-clockadd-extension packageName [version]从 NPM 安装 Extensionpnpm run cli add-extension ohif-test/extension-clockremove-mode packageName移除 Mode 及其专属 Extensionpnpm run cli remove-mode ohif-test/mode-clockremove-extension packageName移除 Extensionpnpm run cli remove-extension ohif-test/extension-clocklist列出已安装的 Extension 与 Modepnpm run cli listsearch [--verbose]在 NPM 中搜索 OHIF Mode/Extensionpnpm run cli search --verbosesearch支持-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关键字开发期的createlink组合正是视频一、二的精髓先脚手架生成再链接进 Viewer 热开发无需发布即可联调。八、进阶私有 NPM 仓库与外部依赖视频教程默认使用公共 NPM registry若你的 Mode/Extension 托管在私有仓库CLI 同样支持。步骤如下npm login npm token create --read-only export NPM_TOKENyour readonly token即创建一个只读 token 并以环境变量NPM_TOKEN导出也可以直接导出已有的 npm tokenCLI 即能访问私有仓库。此外正如第二节所述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-*对外分发用publishadd-*而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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考