npm 包 docdash 使用教程

前言

docdash 是基于 JSDoc 格式的文档生成器。它的特点在于能够生成简约、干净的文档界面,同时也支持主题切换。这使得 docdash 受到了广泛的欢迎,被用于很多 popular 的 package 中,例如 React、Express、Angular 等。本文将会带领大家详细了解 docdash 的使用方法和其相关配置。

安装

为了安装 docdash 必须需要先安装 Node.js,而且 Node.js 的版本最好是在 v8.15.0 或以上。

--- ------- -- -------

安装完成后,你需要将以下代码添加到 package.json 中:

---------- -
  ------ ------ -- ------------
--

其中,-c 选项用于加入一个指向配置文件的选项。该文件名后缀名必须为 .js,这里命名为 .jsdoc.json。

接下来,我们将会创建一个文件夹 docs,为它增加一些必要的文件。目录结构如下图所示:

-----
--- ---
-   --- ---------
--- --------
-   --- ----------
--- -----------
--- ----------

js/ 里的 common.js 包含了例子,你可以根据实际情况修改和删减,swagger/index.html 则是你的 API 文档,而 index.html 则是启 动文档的首页。.jsdoc.json 文件是用于配置文档生成的一些参数,将在下面的章节中讲解。

配置

创建常用的 jsdoc.json 文件,配置如下所示:

-
  ------- -
    ------------------- ----
  --
  --------- -
    ---------- ---------
    ---------- -
      ----------------
    --
    ----------------- -----------------
    ----------------- ---------------
  --
  ------- -
    ----------- -------------------------
    -------------- ------------
    ---------- -----
    ---------- -----
  --
  ---------- -
    ------------------
  --
  ----------- -
    --------- --------
  -
-

如上所述,我们使用了 docdash 的默认模板,并将其安装到了 ./node_modules/docdash 中。你的文档将会生成到 swagger 目录下,生成的文档不包括私有(@private)的方法。我们通过 “plug-ins” 字段来使用 Markdown 语法。

相信务必不少人会疑惑这里的 markdown 字段是什么意思。其实,他是用于说明结合 Markdown 解析器如何处理 markdown 文本。在这个示例中,我们可以使用 marked,当然像其它的优秀开源库一样,也可以使用 Markdown-it 等工具。

下面是常用配置选项,你可以根据你的项目需求进行选择:

-
  ---------- -
    ------------------
  --
  ------------------- -----
  --------- -
    ----------------- -----------------
    ----------------- ---------------
  --
  ------- -
    ----------- -------------------------
    -------------- ------------
    ---------- -----
    ---------- -----
  -
-

例子

下面是一段例子:

---
 - ----------- - ---- ------ ---- --- --- -------
 -
 - ------ -------- - - ----- --------
 - ------ -------- - - ------ --------
 - -------- -------- --- --- -- - --- -
 --

-------- ------ -- -
  ------ - - --
-

为了在最终文档中添加 Markdown,我们需要在 .jsdoc.json 文件中增加 markdown 中的 parser 值。示例如下:

-
  ------- -
    ------------------- ----
  --
  --------- -
    ---------- ---------
    ---------- -
      ----------------
    --
    ----------------- -----------------
    ----------------- ---------------
  --
  ------- -
    ----------- -------------------------
    -------------- ------------
    ---------- -----
    ---------- -----
  --
  ---------- -
    ------------------
  --
  ----------- -
    --------- --------
  -
-

现在,我们来为 add() 函数添加一些 Markdown。看下面的代码示例:

---
 - ----------- - ---- ------ ---- --- --- -------
 -
 - ------ -------- - - ----- --------
 - ------ -------- - - ------ --------
 - -------- -------- --- --- -- - --- -
 -
 - --------
 -
 - -----
 - --- --- - ------ ---
 - ---------- -- ---
 - ---
 -
 - ---- ----------------------------------------------------------
 --
-------- ------ -- -
  ------ - - --
-

上面的 add 函数定义了一个代码段。它能够实现 add 的测试。你能够使用代码块、引用和其他 Markdwon 语法来沉淀你的文档。

结论

在这篇文章中,我们详细介绍了如何使用 npm 包 docdash 来生成符合 JSDoc 格式的文档。我们说明了如何在项目中加入其相关配置和流程,还有列出了一些重要的示例代码。希望本文能对你的前端学习和开发有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60989


猜你喜欢

  • npm 包 broccoli-stylus-single 使用教程

    简介 在前端开发中,CSS 是不可或缺的一部分。而 CSS 预处理器又可以让我们轻松地编写出可重用的样式代码,提高工作效率。Stylus 是一种非常流行的 CSS 预处理器,而 broccoli-st...

    6 年前
  • npm 包 broccoli-postcss-single 使用教程

    本文介绍 npm 包 broccoli-postcss-single 的使用方法,帮助前端开发者快速掌握该工具,在项目中应用 postcss。 什么是 broccoli-postcss-singl...

    6 年前
  • npm 包 broccoli-less-single 使用教程

    在前端开发中,处理 CSS 样式表是必不可少的部分。而使用 Less 作为 CSS 预处理器可以使样式表的编写更加方便快捷,并且增加了可维护性。本文将介绍一款可以帮助前端开发者处理 Less 样式表的...

    6 年前
  • npm 包 ember-cli-styles-preprocessor 使用教程

    在前端开发中,样式预编译器是必不可少的工具之一。而 Ember.js 是一个流行的前端框架,经常被用于构建大型 web 应用程序。如果你正在使用 Ember.js,那么 ember-cli-style...

    6 年前
  • npm 包 Ember-component-css 使用教程

    介绍 Ember-component-css 是一个能够将组件样式打包进组件内部的 webpack loader。通过它,我们可以不必担心样式污染问题,也不必手动引入样式文件,而是直接在组件内写样式,...

    6 年前
  • npm 包 broccoli-flatiron 使用教程

    简介 Broccoli-flatiron 是一个基于 Broccoli 构建的打包工具,用于前端项目的构建和打包。它支持预处理器、模块化和插件化,是一个非常强大的工具。

    6 年前
  • npm 包 ember-code-snippet 使用教程

    在前端开发中,我们经常需要在代码中添加代码片段。如果每次手动添加这些代码,就会浪费很多时间和精力。而使用 npm 包 ember-code-snippet 可以轻松实现在 Ember 应用中添加代码片...

    6 年前
  • npm 包 postcss-easy-import 使用教程

    前言 在前端开发中,我们常常需要使用 CSS 预处理器,如 Sass、Less 等。这些预处理器在实现 CSS 模块化、变量、混合等基础功能的同时,也给前端开发带来了复杂的语法和工具链。

    6 年前
  • npm 包 ember-router-service-polyfill 使用教程

    简介 ember-router-service-polyfill 是一个使用方便、性能高效的轻量级 polyfill 库,可以帮助开发者在 Ember.js 应用中快速地实现一些不支持 router ...

    6 年前
  • npm 包 ember-cli-tailwind 使用教程

    随着前端技术的不断发展,现代前端框架更加强调组件化开发。而 CSS 框架在前端开发中也扮演着重要的角色。Tailwind CSS 是一个高度可定制的 CSS 框架,其优点包括: 可修改任何 CSS ...

    6 年前
  • npm 包 ember-cli-string-helpers 使用教程

    简介 ember-cli-string-helpers 是一个基于 Ember.js 的字符串处理工具库,提供了一系列的字符串处理方法,如大小写转换、字符截取、拼接、格式化等等。

    6 年前
  • npm 包 broccoli-sass-source-maps 使用教程

    简介 Broccoli 是一个快速、可靠且易于使用的前端构建工具,它支持大量的插件,用于处理 JavaScript、CSS、HTML 和其他前端资产。而 broccoli-sass-source-ma...

    6 年前
  • npm 包 ember-cli-sass 使用教程

    如果你是一个前端开发者,那么你一定知道 SASS 这个流行的 CSS 预处理器。使用 SASS 可以让你更方便地编写 CSS,节省时间并且使你的代码更加模块化和可复用。

    6 年前
  • npm 包 ember-truth-helpers 使用教程

    当我们在使用 Ember.js 进行前端开发时,经常会遇到需要对条件表达式进行处理的情况。比如,我们需要判断一个值是否为真,或者是否是一个空数组。当然,我们可以使用 Ember.js 这样一个强大的框...

    6 年前
  • npm 包 ember-tether 使用教程

    前端框架 Ember.js 具备强大的模板与组件化开发能力,同时还内嵌了许多功能强大的插件和扩展。其中,ember-tether 就是一款优秀的插件,可以让开发者在应用中方便地实现基于 Tether....

    6 年前
  • npm 包 broccoli-symbolizer 使用教程

    简介 Broccoli-symbolizer 是一个用于将静态网页转化为简约形式的 npm 包,它可以将编写好的 HTML、CSS 和 JavaScript 代码转化为简洁的 SVG 图形展示出来,帮...

    6 年前
  • npm 包 broccoli-svg-optimizer 使用教程

    简介 Broccoli-svg-optimizer 是一个基于 Node.js 平台提供的 SVG 图像优化工具。SVG 图像在前端开发中应用广泛,优化它们可以减少文件体积、提高页面渲染速度。

    6 年前
  • npm 包 ember-assign-polyfill 使用教程

    背景 在使用 Ember.js 进行开发的时候,经常会使用到 JavaScript 的 Object.assign 方法。然而,如果你的目标浏览器不支持该方法,你就需要使用 Polyfill 来提供此...

    6 年前
  • npm 包 ember-svg-jar 使用教程

    1. 简介 ember-svg-jar 是一个可以将 SVG 图标打包成一个单独的 JavaScript 模块并在 Ember 应用中使用的 npm 包。使用该 package 可以有效地减少 HTT...

    6 年前
  • npm 包 ember-app-scheduler 使用教程

    #npm 包 ember-app-scheduler 使用教程 ##前言 我们在日常前端开发中,往往会遇到需要优化 Web 应用程序性能的需求。如何提升 Web 应用程序用户体验,不仅涉及到前端技术的...

    6 年前

相关推荐

    暂无文章