npm 包 esdoc-inject-script-plugin 使用教程

介绍

esdoc-inject-script-plugin 是一个 npm 包,它可以在生成的 esdoc 文档中自动注入指定的脚本。这个插件可以用于很多场景,比如在生成的文档中添加一些额外的交互功能、添加第三方统计代码等等。

在本文中,我们将介绍如何使用 esdoc-inject-script-plugin 来自动注入脚本。

安装

在使用 esdoc-inject-script-plugin 之前,我们需要先安装 esdoc。如果您已经安装了 esdoc,请跳过这一步。

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

接下来,我们可以使用 npm 来安装 esdoc-inject-script-plugin。

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

使用

使用 esdoc-inject-script-plugin 的方法非常简单,只需要在 esdoc 配置文件中加入以下配置即可。

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

在这个配置中,我们启用了 esdoc-inject-script-plugin,并注入了两个脚本。第一个脚本是一个 jquery 的 cdn 地址,第二个脚本是一个文件名为 script.js 的本地文件。

参数说明

enable

  • 类型:boolean
  • 默认值:false

是否启用 esdoc-inject-script-plugin 插件。

scripts

  • 类型:Array
  • 默认值:[]

需要注入的脚本列表。

每一个脚本需要包含以下参数:

type

  • 类型:string
  • 可选值:'url' 或 'file'

脚本类型。'url' 表示注入一个 url 地址的脚本,'file' 表示注入一个本地文件的脚本。

url

  • 类型:string
  • 仅对 type 为 'url' 的脚本有效

url 地址的字符串,表示需要注入的脚本地址。可以是任何合法的 url 地址,比如 cdn 地址等等。

file

  • 类型:string
  • 仅对 type 为 'file' 的脚本有效

表示需要注入的本地文件名。

示例代码

在本节中,我们将演示如何使用 esdoc-inject-script-plugin 在生成的文档中注入一个文件。

假设我们已经有了一个名为 script.js 的本地脚本文件。我们需要在生成的 esdoc 文档中自动注入这个脚本。我们可以使用以下 esdoc 配置文件:

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

运行以下命令,即可生成包含 script.js 的 esdoc 文档。

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

总结

通过本文的介绍,我们学习了如何使用 npm 包 esdoc-inject-script-plugin 来自动注入脚本。这个插件可以帮助我们在 esdoc 文档中添加各种交互功能和第三方统计代码,使得我们的文档更加丰富多彩。

使用 esdoc-inject-script-plugin 需要注意的是,我们需要确保注入脚本的来源是可信的,并且脚本本身不会对我们的网站或文档产生任何负面影响。

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


猜你喜欢

  • npm 包 think-swagger-router 使用教程

    简介 think-swagger-router 是一款基于 ThinkJS 和 Swagger 的路由自动化注册器,能够根据 Swagger 的配置生成对应的路由并完成接口的自动注册。

    2 年前
  • Vue-back-top 使用教程

    Vue-back-top 是一个用于 Vue.js 应用程序的简单且易于使用的返回顶部指令。该指令可以方便地帮助你在 HTML 页面上创建一个返回顶部的按钮。 本文将为大家详细介绍如何使用 Vue-b...

    2 年前
  • npm 包 @vivid-svg/core 使用教程

    前言 在前端开发中,svg 技术在图形绘制和交互效果方面有广泛应用。@vivid-svg/core 是一款基于 React 的 svg 组件库,可以帮助开发者快速的构建出交互丰富的 svg 图形。

    2 年前
  • npm 包 chrome-launcher-cli 使用教程

    当我们在开发 Web 应用的时候,需要在不同的浏览器中测试网站。chrome-launcher-cli 是一个轻量级的命令行工具,它可以快速启动 Google Chrome 浏览器并调整浏览器的参数。

    2 年前
  • npm 包 hubup 使用教程

    简介 hubup 是一个用于自动化发布 GitHub Release 的 npm 包,能够简化发布流程、提高开发效率。它支持多平台、多语言,是公认的优秀的自动化发布工具之一。

    2 年前
  • npm 包 request-cus 使用教程

    简介 request-cus 是一个 Node.js 的请求库,它是 request 的封装,有更简单和友好的 API 接口,支持 GET、POST、PUT、DELETE 等 HTTP 请求,并提供了...

    2 年前
  • npm 包 waypoints-mrd 使用教程

    前言 Waypoints-mrd 是一个可以帮助前端开发者实现滚动监听的 npm 包。在现代 web 网站中,滚动监听已成为非常重要的功能,因此本文将向大家介绍该 npm 包的使用方法。

    2 年前
  • npm 包 pretty-chart 使用教程

    前言 在现代前端开发中,数据可视化是非常重要的一环。虽然现在市面上有很多成熟的可视化库可供使用,但是对于一些需要个性化定制的需求,我们往往需要自己去实现。 pretty-chart 是一款能够帮助我们...

    2 年前
  • npm 包 wfk-montserrat 使用教程

    wfk-montserrat 是一款免费的前端字体包,它为开发者提供了一种简便的方式来实现在网站或应用程序中使用 Montserrat 字体。本教程将向您介绍如何使用 wfk-montserrat n...

    2 年前
  • npm 包 jdjr-vue-2b 使用教程

    在前端开发中,使用 npm 包可以大大提高开发效率并且代码质量也能得到保证。本文将介绍一个名为 jdjr-vue-2b 的 npm 包,它是基于 Vue.js 的一个 UI 框架,该框架可以用于构建各...

    2 年前
  • npm 包 postcss-fs-css 使用教程

    前言 在前端开发中,我们经常会使用 CSS 来美化网页的外观。而 CSS 还有一些高级特性,比如 mixins、嵌套、变量等等,这些特性经常使用工具来预处理,比如说 Sass、Less、Stylus ...

    2 年前
  • npm 包 ng-bootstrap-plus 使用教程

    ng-bootstrap-plus 是一个基于 Bootstrap 样式的 Angular 库,该库提供了一系列 UI 组件和指令,可以使您快速创建优雅的 Web 应用程序。

    2 年前
  • npm包rn-web-cli使用教程

    简介 在开发React Native项目过程中,我们通常需要为项目创建一个Web版本,以便在浏览器中查看和调试,这时就需要使用rn-web-cli这个npm包来生成一个React Native和Rea...

    2 年前
  • npm 包 ng-elastic-input 使用教程

    前言 ng-elastic-input 是一个开源的 Angular.js npm 包,主要用于实现自适应的输入框。当文本内容超过输入框一行的宽度时,输入框的高度会自动调整,以便容纳更多的内容。

    2 年前
  • npm 包@gerhardsletten/react-css-loaders 使用教程

    前言 在前端开发中,常常需要使用 CSS 动画来增加页面的互动性,而@gerhardsletten/react-css-loaders 就提供了一批 CSS 加载动画,可以帮助我们快速实现各种炫酷的效...

    2 年前
  • npm 包 ngx-drf-token-auth 使用教程

    随着前端技术的不断发展,前后端分离成为了越来越普遍的开发模式。在这种模式下,前端需要向后端发送请求来获取数据和登录等操作,而后端会提供 API 接口来处理这些请求。

    2 年前
  • npm 包 ricoh-theta-viewer 使用教程

    介绍 在前端开发中,有时需要展示 360 度全景图片。ricoh-theta-viewer 是一个用于展示全景图片的 npm 包。本文将详细介绍 ricoh-theta-viewer 的使用方法,并提...

    2 年前
  • npm 包 sth-react-audio-recorder 使用教程

    在前端开发中,音频录制是一个非常常见的功能。而 npm 包 sth-react-audio-recorder 可以帮助我们在 React 项目中轻松地实现音频录制功能。

    2 年前
  • npm 包 @ionic-decorator/status-bar-style 使用教程

    前言 在移动应用开发中,状态栏是用户接触最频繁的部分之一。在不同的场景下,我们需要控制状态栏的样式以达到不同的视觉效果,并且需要根据不同的操作系统(iOS 或者 Android)做出不同的处理。

    2 年前
  • npm 包 fluxter 使用教程

    介绍 Fluxter 是一个使用 Flux 架构思想构建的轻量级前端框架,可以帮助前端开发人员更好地管理和控制应用程序的状态,提高代码复用性和维护性。Fluxter 提供了一套清晰的 API,使开发人...

    2 年前

相关推荐

    暂无文章