使用Compodoc生成angular项目静态文档

Compodoc是Angular应用程序的一个文档生成工具。它生成应用程序的静态文档，可帮助开发人员快速理解当前项目。可用于Angular、Nestjs、Stencil框架，包含8中内置主题，4种语言选项。

示例

compodoc.github.io/compodoc-de…

下载

npm install -g @compodoc/compodoc

npm install --save-dev @compodoc/compodoc

运行

在package.json中定义一个任务。

"scripts": {
  "compodoc": "npx compodoc -p src/tsconfig.app.json"
}
复制代码

npm run compodoc

用法

compodoc <src> [option]

示例：

"scripts":{
	"compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -w -s --language=zh-CN"
}
复制代码

下面列出常用的配置属性：

全部属性请访问compodoc.

配置文件

你可以在项目根目录创建一个 .compodocrc , .compodocrc.json , .compodocrc.yaml 或者在 package.json中定义 compodoc 属性。

{
   ...
   "doc": "npx compodoc -p src/tsconfig.app.json -n \"My app documentation\""
   ...
}
复制代码

npm run doc

文档主要内容

• Overview 项目主要内容统计概览。图形化展示主要模块、组件、指令等
• README 由项目根目录 README.MD 生成
• Dependencies 项目第三方依赖列表
• Modules 所有模块的列表。生成有模块依赖图列表
• Components 独立组件
• Directives 独立指令
• Classes 独立类列表
• Injectables 使用 Injectables 装饰器修饰的独立类列表
• Interfaces 所有接口定义列表
• Pipes 管道列表
• Routes 路由树图。路由定义需指定类型为 Routes (从 @angular/router 导入)
• Miscellaneous 其他杂项内容集合。根据这里的内容，可以分析分散的重复定义的内容，不合理的杂项定义等
• Documentation coverage 文档覆盖率信息

注释

​ Compodoc支持JSDoc注释语法，注释会在模块、组建、指令等info页面生成description，同时支持为每个模块、组件、指令等单独编写markdown文件，生成在页面选项卡中。也可为整个项目添加外部markdown文件。需创建包含markdown文件的文件夹，并包含 summary.json 文件，使用 --includes 命令扩展文档。

summary.json

[
    {
        "title": "A TITLE",
        "file": "a-file.md"
    },
    {
        "title": "A TITLE",
        "file": "a-file.md",
        "children": [
            {
                "title": "A TITLE",
                "file": "a-sub-folder/a-file.md"
            }
        ]
    }
]
复制代码