JSDoc是否支持向@example块动态注入内容以自动替换脚本服务端地址
JSDoc动态注入@example内容解决方案
JSDoc官方没有提供直接向@example块动态注入运行时内容的内置能力,但可以通过以下几个方案彻底解决每次手动修改输出文件的问题:
方案1:直接编写无需修改的自适应示例代码(最推荐)
因为你明确文档目录 /myProduct/docs/ 和脚本目录 /myProduct/lib/ 始终同级,你可以直接在@example块中写入自动拼接部署地址的加载代码,用户复制后即可直接使用,完全不需要替换占位符:
// 精简加载脚本,无需修改任何配置直接使用 (function() { // 自动根据当前部署环境拼接脚本地址,兼容根目录、子目录部署场景 const scriptUrl = new URL('../../lib/script.js', document.location.href).href; const s = document.createElement('script'); s.src = scriptUrl; s.async = true; document.head.appendChild(s); })();
该方案完全不需要额外修改JSDoc生成流程,一次编写永久生效,对用户使用也最友好。
方案2:配置构建后自动注入替换脚本
如果一定要保留原有带<server>占位符的示例写法,你可以写一个简单的Node.js后处理脚本,加入到文档构建流程中实现自动注入:
- 把你之前手动插入的前端替换逻辑保存为单独的JS片段,核心逻辑为页面加载后遍历所有示例代码块,将
<server>占位符替换为当前页面的window.location.origin - 在
package.json中修改文档构建命令,将JSDoc生成和后处理流程绑定,示例命令:"build:docs": "jsdoc -c jsdoc.config.json && node ./post-process-docs.js" post-process-docs.js的核心逻辑为读取JSDoc输出的所有HTML文件,在</body>标签前自动插入你的替换脚本内容,每次构建自动完成,无需手动操作。
方案3:自定义JSDoc插件/模板
如果需要更深度的定制能力,你可以基于当前使用的JSDoc模板做二次开发,或是编写自定义JSDoc插件,在渲染@example标签的阶段直接插入需要的动态逻辑,完全不需要额外的后处理步骤。
内容的提问来源于stack exchange,提问作者tnurmi
相关产品推荐
相关产品推荐

