html文件制作工具(手机编写html5软件)

这次我们更进一步,在这篇文章中,我们将构建一个简单的CLI,允许用户生成HTML页面。我们首先要生成一个标准的空白页面,然后让用户输入参数,比如文件名和标题,先通过选项,然后通过提示问题让用户输入参数。

html文件制作工具(手机编写html5软件)

创建用于编写CLI的文件夹。我将其命名为 html-generator-cli。打开一个终端,然后在此文件夹中运行:

该命令会有几个问题要问你,顺便说一下,这正是我们最终希望在空白HTML页面生成器中包含的内容。这将在文件夹中生成 package.json 文件:

html文件制作工具(手机编写html5软件)
我们需要创建包的 index.js 文件作为入口在package.json中引入。在这个文件中,写入下面代码:

现在我们需要创建运行这段代码的命令。

将最后一行添加到package.json中。现在,我们可以测试我们非常简单的CLI。在项目文件夹中局安装我们新创建的包到本机:

打开一个新终端并运行:

如果您使用Windows,现在应该会看到“Hello World!”。在您的终端中。如果您使用的是基于UNIX的操作系统,则应该得到一个错误,可能与语法错误和意外的token有关。我本人用的是Mac,结果人如下

html文件制作工具(手机编写html5软件)
这是因为与Windows不同,基于UNIX的系统不关心文件的扩展名(此处为“.js”),因此不知道使用哪种语言。我们必须告诉系统使用Node运行脚本。为此,我们在文件的开头添加一条注释行:

我们要创建一个CLI来生成HTML文件,为此,我们将使用Node.js文件系统模块。该模块是Node内置模块,提供与文件系统交互的API,也就是说可以创建、读取、修改和删除文件。我们只需要使用文件系统模块的 writeFile 方法即可,该方法允许你创建文件。

如果您再次在终端中保存并运行 html-generator-cli,现在应该在文件夹中看到一个 index.html 文件。

现在我们生产的文件名和HTML中的 title 标签内容是写死的,我们应该可以将文件名和标题作为参数传递给CLI。要传递参数,你只需在命令之后写上参数,然后这些参数就可以在一个名为 argv 的变量中提供给进程。

在代码中编写如下代码:

并在终端中运行它:

然后,你应该在控制台中看到一个包含参数作为字符串的数组:

html文件制作工具(手机编写html5软件)
传递的参数在数组的最后两项,我们只需要使用数组的 slice(2) 方法即可拿到。我们决定第一个输入参数是文件名(不带HTML扩展名),第二个参数将是HTML页面的标题。这些参数都不是必需的,如果没有提供名称和标题,则我们将文件称为index.html,标题为“Title”。

我们保持简单,不验证用户输入的情况,用户可能会给该文件指定了无效的名称,这是你在实际工作中必须验证的内容。

现在,你可以在终端中尝试以下操作:

结果

html文件制作工具(手机编写html5软件)

先前的方法易于实现,但有一些缺点:用户必须知道期望哪些参数以及以什么顺序。如果他不想给出文件名,他也没有办法给出标题,我们可以通过创建选项来改善这一点。

与其一个接一个地写参数,我们可以构建我们的CLI,让用户输入类似于这样的文件名和/或标题。

写起来有点长,但是用户更清楚他给出的参数是什么,顺序不再起作用,你可以给出一个标题,即使你没有给出任何文件名。

现在,我们在参数数组 args 中获得选项 –file-name 或 –html-title 的索引。如果存在一个选项,那么要给文件名或标题的值就是参数数组中 –file-name 或 –html-file 之后的元素。如果不存在选项,则其索引将为 -1。如果此索引为 -1 或参数数组中该选项之后没有任何值,我们分别为文件名或标题提供默认值。其余代码未更改。

你可以运行新的CLI,如果没有选择,它将创建标题为“Title”的index.html文件。如果你编写一个选项但忘记提供一个值,它将也提供默认值。如果你正确地使用给定的选项编写命令,那么它应该创建一个具有正确名称和正确HTML标题的文件。

效果

html文件制作工具(手机编写html5软件)
同样,在实际的CLI中,你会希望多检查一些输入,首先要确保用户输入的值是有效的,但也要在缺失值或选项出现两次的情况下警告他们。

使用选项已经是一种改进了,但是它仍然需要用户知道它可以传递什么参数以及使用哪个标记。当你初始化你的npm项目时,你可以通过很多东西作为选项。CLI会直接问您一些问题,因此您无需阅读文档即可了解如何提供项目名称,版本等信息。

要从控制台读取用户输入,我们需要Node(自版本7)提供的模块 readline。你可以使用以下代码在终端中对其进行测试:

效果如下

html文件制作工具(手机编写html5软件)
为了生成我们的HTML页面,我们首先要询问文件名,然后询问标题。如果用户没有输入任何内容,我们将获得默认值。我们向用户显示默认值是什么,以便在默认值正确的情况下可以跳过该问题。

如果你在终端中运行它,将会询问两个问题。

html文件制作工具(手机编写html5软件)
用户不必了解您的CLI选项,所有重要的事情都可以直接询问。但是,你应该只以这种方式询问主要配置问题,并让用户阅读文档以了解不太常见的选项。

我们使用Node和npm创建了一个简单的CLI,允许用户生成一个空白的HTML文件,是不是非常简单?你可以通过添加新选项并验证用户输入来改进此示例。

版权声明:拓辰网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流,不声明或保证其内容的正确性,如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 nctcnet@vip.qq.com 举报,一经查实,本站将立刻删除。

(0)
橘笙南木途归谜橘笙南木途归谜贡献者

相关推荐

  • imovie怎么添加音乐(苹果手机imovie怎么添加音乐)

    iMovie 剪辑中包括的音频效果可以应用到片段,从而增强影片的声音。那我们如何在Mac上的iMovie 剪辑中添加音频效果呢?快和小编一起来看看详细的图文教程吧! 将音频效果添加到片段 1.在 Mac 上的 iMovie 剪辑 App 中,在浏览器或时间线中选择音频片段(或含音频的视频片段)。2.若要显示效果控制,请点按“视频和音频效果”按钮。 3.点按“音频效果”按钮,然后点按要应用到片段的音…

    2023年6月25日
    0
  • win10忘记密码如何开机密码(电脑密码忘了解除方法)

    很多时候电脑为了重要资料和个人隐私的安全性都会设置一个开机密码,但是有时候会突然忘记密码,或者较长时间没有使用电脑,而忘记了开机密码,还有人经常更换开机密码,换的多了,自己都记混了密码从而导致开不了机进不了系统了。那么电脑开机密码忘记了怎么办呢?今天就来讲一下忘记电脑开机密码的几种解决方法。 一、清除密码重新设置新密码。重启电脑,进入到系统登录界面时,同时按住键盘上的Ctrl和Alt键,然后连击D…

    2023年6月25日
    0
  • 动态鼠标指针怎么制作(电脑动态鼠标指针)

    在VBA编程中,鼠标形状也是可以改变,通常情况下,很少主动设置鼠标形状。 如果熟悉Windows系统设置,那么对鼠标设置也不陌生。 VBA并不是可视化操作,本节就讲一下,如何在编程中动态改变鼠标形状。 鼠标形状就是个参数设置,这个参数在VBA里以常量形式来固定下来,如何让鼠标符合我们主定义的方式来显示,只需要将常量进行改变一下就可以实现。 实现这个过程的属性为Cursor,是Application…

    2023年10月27日
    0
  • 《地平线:黎明时分》Gamespot 9分 M站均分86

    《地平线:黎明时分》PC版将于8月7日正式发售,目前,游戏的媒体评分已经正式解禁,Gamespot为其打出9分,表示游戏非常出色,本作是一个非常有趣的开放世界动作游戏,不遗余力地展现出了游戏中的世界,并创造了一个优秀的战斗机制,只是游戏性能(优化)方面有些问题。 +复杂而激动人心的战斗 +富有想象力的敌人设计 +融合自然与科技元素 +十分震撼的角色发展 -不简洁的用户界面 -贫乏的近战机制 Gam…

    2023年6月29日
    0
  • 远程计算机关闭什么意思(远程计算机已关闭解决方法)

    当你在不同的房间里安装了多个电脑,又不想跑到每台电脑前面去关闭或重新启动它时,远程关机或重新启动会派上用场。Windows 10提供了一个实用程序,您可以通过它关闭或重启连接到网络的电脑。通过调用Shutdown.exe程序,只要对网络中的Windows 10电脑进行相应配置,就可以关闭或重新启动它们。下面我们来介绍一下。 开启remote registry服务 如果您想远程关闭或重新启动PC,您…

    2023年10月16日
    0
关注微信