在前端开发的过程中,我们经常需要学习新的技能和知识。而学习过程中,我们可能需要一些指导和练习。因此,很多开发者会选择使用交互式教程平台,比如 Codecademy
。
同样地,对于学习前端开发的人来说, @akitecht/workshopper
是一个非常好的 npm 包。这个包可以通过一个非常简单的方式来提供交互式教程。本篇文章将会详细介绍 npm 包 @akitecht/workshopper
的使用方法以及实际示例。
@akitecht/workshopper 是什么?
@akitecht/workshopper
是一个基于 Node.js 开发的 npm 包,它可以提供交互式教程。这样一来,学习者可以在练习的同时,通过不断的反馈来加深对知识点的理解。
使用 @akitecht/workshopper
,可以很方便地创建属于自己的教程,并能够随着需求的变化不断的更新它们。
安装 npm 包 @akitecht/workshopper
在使用 @akitecht/workshopper
之前,需要确保 Node.js 已经被正确安装。可以通过以下命令检查 Node.js 是否安装成功:
node --version
如果输出了当前 Node.js 版本号,那么说明 Node.js 已经被正确安装了。接下来,就可以通过命令行工具来安装 @akitecht/workshopper
:
npm install -g @akitecht/workshopper
常用命令:
workshopper list
:列出所有的教程包workshopper select
:选择要做的教程包workshopper start
:开始教程
创建一个教程
创建教程分为两部分:
创建教程的题目/练习 (大量使用文本)
编写代码验证练习题答案
接下来,我们将分别介绍这两个步骤。
创建教程的练习
我们先通过一个简单的例子,来介绍 @akitecht/workshopper
的练习创建方式。为了演示方便,我们创建一个简单的练习,用于计算两个数字的和。打开命令行工具,执行以下命令:
workshopper create
该命令会要求输入一些信息。根据提示,输入以下信息:
exercise name: add-numbers
接着,@akitecht/workshopper
会自动生成一个练习的模板。打开 exercises/add-numbers/problem.md
,该文件包含了练习的标题、说明、问题和答案等信息。
修改 problem.md
,将题目内容改为 "输入两个数字,然后求它们的和。"。将答案改为以下内容:
module.exports = function (a, b) { return a + b; }
接下来,我们需要更新 package.json
文件。将 workshopper-adventure
替换为 @akitecht/workshopper
。
在 package.json
中添加以下代码:
"scripts": { "start": "workshopper" },
编写代码验证练习题答案
练习的题目和答案已经准备好了,接下来需要编写代码对答案进行验证。打开 exercises/add-numbers/verify.js
,以下是需要输入其中的代码:
-- -------------------- ---- ------- ----- - ------ - - ------------------------------------------ ----- -------- - ---------------------- -------------- - ------------ -- - ----- --- -- - ------------- --------------- -- ------------ -- --- -- - --- - ------ ----- - ------ ------ ---
这里,我们首先导入 verify
和 solution
函数。然后,将 input
(用户输入的内容)通过字符串的 .split()
方法,将其转换为数值。
最后,我们与预期的答案比较。如果比较结果是 true
,则意味着用户输入的答案正确。反之,如果比较结果是 false
,则提示用户输入有误。
save 和 test 一下。可以看到交互式教程已经可以跑起来了,执行以下命令查看效果:
workshopper list
- learn-you-node : "Learn You The Node.js For Much Win!"
- add-numbers : "输入两个数字,然后求它们的和"
可以看到添加的 add-numbers
教程已经被列出来了。执行以下命令,开始做练习:
workshopper select add-numbers workshopper start
然后就可以愉快的练习了。
结论
以上是 @akitecht/workshopper 的基本用法,希望本文对你有所帮助。如果你有其他的学习方法或者建议,欢迎在评论区中分享。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b4e51ab1864dac66851