在前端开发中,npm 是我们日常开发经常使用的包管理工具。@angular-package/docs 是一个基于 Angular 的 npm 包,用于生成文档。
本篇文章将讲解如何使用 @angular-package/docs 生成文档,并包含详细内容、深度学习以及指导意义,同时提供示例代码帮助大家更好的理解。
安装包
如果您之前在项目中没有使用过 npm 包 @angular-package/docs,您需要先安装该包。您可以通过以下命令进行安装:
npm install @angular-package/docs --save-dev
使用方法
安装包后,您可以通过以下方法使用该 npm 包:
ngut docs generate <src> [--dest <dest>]
具体命令含义如下:
ngut
是 @angular-package/docs 的命令行工具docs
是要生成的文档类型generate
告诉 ngut 你想生成什么类型的文档<src>
是文件夹路径,含有 markdown 文件--dest
是可选参数,如果您想要将生成的文档输出到一个特定的目录。
文档配置
@angular-package/docs 允许您自定义生成的文档。您只需要创建一个包含配置信息的 document.config.ts
文件即可。
document.config.ts
的常用配置如下:
title
,文档标题。source
,markdown 文件所在的目录。dest
,文档输出目录。assets
,其它需要复制到输出目录的文件。pipe
,自定义管道,用于针对 markdown 内容实现特定的操作。post
,自定义文档渲染器,用于针对生成的 HTML 进行特定的操作。
示例 document.config.ts
文件:
-- -------------------- ---- ------- ------ - ---------------- ----- - ---- ------------------------ ----- ------- --------------- - - ------ --- ------ ------- --------- ----- -------------- ------ ------------- ------- ------------- ----- - ----- - ------- - --------------------- ----- - - - -- ------ ------- -------
在 pipe
中,我们针对标记代码块做了一些操作。useExistingResources
禁用了资源共享。
Markdown 文件编写规范
编写高质量的 markdown 文档是生成优质文档的关键。以下是一些编写标准化的 markdown 文档的建议:
缩进
建议使用 4 个空格作为一级缩进。如果您使用的是现代编辑器,可以设置 tabs equal 4 spaces。
标题
建议使用 #
标记的大号标题作为文档的开头。建议适度使用二级,三级标题。小标题应当根据主题适当地使用。
列表
建议将列表使用 -
或 *
开始。需注意缩进使用级别,列表项应当与 **
空出多一级。
粗体/斜体文本
使用 **
或 __
包裹文本实现粗体效果,使用 *
或 _
包裹文本实现斜体效果。
代码块
使用 ```
封装代码块,示例代码:
```ts function sum (a: number, b: number) { return a + b; }
### 引用 使用 `>` 封装引用块,示例代码: ```md > This is a reference
示例代码
如下是一个示例 document.config.ts
文件,其包含了上述提到的配置和规范:
-- -------------------- ---- ------- ------ - ---------------- ----- - ---- ------------------------ ----- ------- --------------- - - ------ --- ------ ------- --------- ----- -------------- ------ ------------- ------- ------------- ----- - ----- - ------- - --------------------- ----- - - - -- ------ ------- -------
现在我们可以在项目根目录下运行命令:
ngut docs generate ./src/app --dest ./dist/docs
命令输出的文件夹 ./dist/docs
中将会包含文档信息,可随时使用静态服务器查看文档。
指导意义
通过 @angular-package/docs,您可以方便地生成文档并维护文档信息。这对于开发者和项目管理人员来讲是非常重要的。同时,规范化的文档格式和编写优质的文档也可以帮助更多的开发者理解和加深对代码和项目的理解。因此,我们在日常的项目开发中也应该重视文档的编写和维护。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cf681e8991b448e6b5f