npm包workshopper-exercise使用教程

workshopper-exercise包是一个用于创作Node.js的workshoppers的工具包。这个包使得我们可以通过创建一个类来自定义用户如何交互与代码以及事件的触发,以及代码的执行。这里我们将介绍如何使用workshopper-exercise包以及如何创建属于自己的workshopper教程。

安装

workshopper-exercise是一个npm包,你可以通过以下命令进行安装:

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

使用

1. 配置

在创建workshopper时,我们需要定义许多的内容,包括:

  • 与练习相关的描述
  • 安装依赖
  • 运行通过的检测
  • 运行未通过时的检测
  • 交互信息
  • 代码执行流程

这些内容是通过定义一个workshop类以及其方法和属性来完成的。我们可以新建一个文件,在这个文件中定义我们的workshop类。

---- -------

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

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

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

2. 创建练习

接下来我们来创建我们的 workshopper 中的一个 exercise。

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

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

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

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

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

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

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

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

这些方法和属性都是用来在题目中添加各种检测方法、执行代码的方法等等。 workshopper-exercise还提供了在代码执行前的准备工作的API,例如获取提交代码或题目代码的路径以及设置该路径的监听器等等。

3. 运行练习

在完成练习的书写之后,你可以通过以下命令运行它。

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

示例代码

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

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

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

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

上那个例子是一个workshopper 的例子,可以从中阅读挑战议题并为其提供答案。

我们先定义了一个辅助函数以 getAvailableLanguages() 获取目录中的子目录,我们还定义了一些元数据-名字,子标题,exerciseDir,帮助文本,先决条件和 脚注的文件.

详解

当我们开始考虑 exercise 时,我们先需要设置元数据,例如workshopper的名称,副标题,子标题,练习的目录,帮助文档以及先决条件。

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

workshopper 的代码大致如下:

appDir

这是启动工作流程序的目录,也就是运行’workshopper’命令所在的目录。

exerciseDir

这是我们的exercise目录--您可以将其设置为任何您想要的名称。

menuItems

如果我们想为应用程序添加自己的自定义导航元素,则可以使用此属性。您可以设置名称和顺序。

helpFile

改代码指定帮助文档的位置。

prerequisitesFile

先决条件文件提供了练习的先决条件的一般描述和介绍。

footerFile

底部文件将出现在工作流程的结尾处,类似于帮助文件。 在设置元数据后,您可以开始编写您的练习。

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

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

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

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

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

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

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

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

  ------ --------
-
  1. 首先定义了一个’workshopper-exercise’函数对象。
  2. 在addSetup函数中,请求一个服务器并获取要提交的目标。我们将其保存在originalTarget变量中。
  3. 添加了一个处理程序,其中包含对提交的目标的处理。我们验证目标是否等于原始目标+数字。每次正确的提交会自增一个数字。
  4. 添加了一个验证处理程序,此处理程序告诉用户是否已将所有练习解决方案。

结论

在做这个任务的时候,最重要的是理解每一个概念,以及如何将它应用到workshopper中。总的来说,您需要熟悉许多不同的API,以及它们是如何相互作用的。一旦您理解了这些概念并开始使用它们开发您自己的内容,您将可以创造出令人惊喜的workshopper来。

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


猜你喜欢

  • npm 包 browserify-json-bundle-loader 使用教程

    介绍 browserify-json-bundle-loader 是一个基于 browserify 的 npm 包,它可以将 JSON 文件打包成 JavaScript 模块,并使用 bundle l...

    5 年前
  • npm 包 preview-email 使用教程

    前言 在前端开发过程中,经常会需要向客户或团队成员发送邮件,以展示设计或组件的效果。然而,当我们在发送邮件时,我们怎样才能预览我们的邮件呢?这时候,就需要使用到 preview-email 这个 np...

    5 年前
  • npm 包 email-templates 使用教程

    在实际的开发过程中,需要发送邮件的场景非常常见。而手工编写邮件模板并不是一件容易的事情。为了解决这个问题,我们可以使用一个叫做 email-templates 的 npm 包,帮助我们快速高效地编写邮...

    5 年前
  • npm 包 nodemailer-markdown 使用教程

    在前端开发中,邮件通知是一个必需的功能,尤其是在项目上线或出现异常时,需要通过邮件通知相关人员。利用 nodemailer-markdown 这个 npm 包,我们可以快速方便地实现邮件发送和邮件内容...

    5 年前
  • npm 包 dkim-signer 使用教程

    什么是 dkim-signer? dkim-signer 是一个 Node.js 库,可以帮助我们在发送邮件时自动添加 DKIM 签名,使得被收件人接收的邮件不会被错放到垃圾邮件中。

    5 年前
  • npm 包 nodemailer-dkim 使用教程

    在网络和邮件交互方面,DKIM(DomainKeys Identified Mail)协议被广泛使用来验证发件人身份,确保邮件的真实性和完整性。nodemailer-dkim 是一个 npm 包,它可...

    5 年前
  • npm 包 swig-email-templates 使用教程

    在前端开发中,我们经常会涉及到邮件模板的设计与开发,而 swig-email-templates 就是一个非常实用的 npm 包,可以帮助我们快速构建邮件模板以及渲染模板数据,本篇文章将详细介绍这一包...

    5 年前
  • npm 包 curl-amd 使用教程

    curl-amd 是一款用于在浏览器端使用 AMD 模块化方案的工具库。它可以通过 npm 安装,并支持各种常见的模块化方案,如 RequireJS 和 CommonJS。

    5 年前
  • npm 包 undefine 使用教程

    在前端开发中,我们经常会使用各种 npm 包来快速完成代码的编写和功能实现。但有时候,我们可能会遇到一些奇怪的问题,如在引入某个 npm 包时,出现了 undefined 的情况。

    5 年前
  • npm 包 piexifjs 使用教程

    1. 概述 piexifjs 是一个用于前端图片处理的 npm 包,它提供了对图片的 Exif 数据进行读取与修改的功能。其具有轻量、易用、功能强大的特点,可以满足多种前端图片处理场景的需求。

    5 年前
  • npm 包 Passport-LinkedIn 使用教程

    Passport-LinkedIn 是一款基于 Node.js 平台的集成了 LinkedIn 登录授权功能的 npm 包。有了 Passport-LinkedIn,开发者可以轻松地通过编写少量代码,...

    5 年前
  • npm 包 toubkal 使用教程

    简介 toubkal 是一个用于 Web 和 Node.js 的 JavaScript 流引擎库,用于构建数据流应用程序。它基于 RxJS 和 Node.js 的流构建,提供了一种易于使用和重用的管道...

    5 年前
  • npm 包 iwalk 使用教程

    前言 在现代 Web 开发中,前端工具的地位越来越重要。其中,npm(Node Package Manager)是个非常重要的工具,它是一个用来安装和管理 Node.js 包的包管理器。

    5 年前
  • npm 包 node-file 使用教程

    简介 node-file 是一个 Node.js 模块,用于读取、创建、写入文件以及其他文件系统操作。它使用了 Promise 和 async/await 的语法糖,使得使用该模块变得更加简单和易用。

    5 年前
  • npm 包 eswalker 使用教程

    简介 在前端开发中,我们经常需要对 JavaScript 对象进行遍历,这时候 eswalker 这个 npm 包就派上用场了。eswalker 可以遍历任意 JavaScript 对象,不管这个对象...

    5 年前
  • npm 包 ptap 使用教程

    简介 npm 是一个 Node.js 的包管理器,全称 Node Package Manager。使用 npm 可以非常方便地下载和管理 Node.js 模块,大多数的前端开发也都使用 npm 来管理...

    5 年前
  • npm 包 mithril-coat 使用教程

    在前端开发中,Mithril 是一种轻量级的 JavaScript 框架,它提供了一个高效的方式来构建单页面应用程序。但是,Mithril 框架并不提供任何 UI 组件,这使得其在实际开发中使用不太方...

    5 年前
  • npm 包 npm-zepto 使用教程

    前端开发的一个重要环节就是使用各类工具和库来提高开发效率和质量。而 npm 包是其中一个重要的资源库,里面包含了许多常用的前端工具和库,开发者可以直接通过 npm 安装并使用它们。

    5 年前
  • npm 包 array.of 使用教程

    随着前端技术的发展,越来越多的 npm 包被用来帮助我们完成各种复杂的任务。其中,array.of 就是一个非常有用的 npm 包,它用于创建一个新的数组,而不是使用 Array 构造函数。

    5 年前
  • 使用 npm 包 blocked 解决网络请求被阻的问题

    最近,有不少开发者反映在开发网络应用时遇到了一些网络请求被阻的问题,特别是在境外服务器上。这时,我们可以使用一个非常优秀的 npm 包 - blocked 来解决这些问题。

    5 年前

相关推荐

    暂无文章