上一篇：实战|使用JavaScript从零开始制作自己的命令行（CLI工具）介绍了如何从零开始制作CLI，只是一个简单的例子，今天更进一步，制作一个生成HTML模板的实际程序。在本文中，我们将构建一个简单的CLI，允许用户生成HTML页面。我们首先需要生成一个标准的空白页面，然后让用户输入参数，比如文件名和标题，首先通过选项，然后通过提示问题让用户输入参数。创建HelloWorldCLI创建用于编写CLI的文件夹。我将它命名为html-generator-cli。打开一个终端，然后在这个文件夹中运行：npminit这个命令会问你几个问题，顺便说一句，这正是我们最终想要包含在我们的空白HTML页面构建器中的东西。这将在文件夹中生成一个package.json文件：我们需要创建包的index.js文件作为package.json中的入口点。在此文件中，写入以下代码：console.log('HelloWorld!');现在我们需要创建命令来运行这段代码。{"name":"html-generator-cli","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"keywords":[],"author":"","license":"ISC","bin":"index.js"}将结束with一行被添加到package.json中。现在，我们可以测试我们非常简单的CLI。在项目文件夹中本地安装我们新创建的包：npminstall-g../html-generator-cli打开一个新终端并运行：html-generator-cli如果您使用的是Windows，您现在应该看到“HelloWorld！”.在你的终端。如果您使用的是基于UNIX的操作系统，您应该会收到一个错误，可能与语法错误和意外标记有关。我自己使用Mac，结果如下，因为与Windows不同，基于UNIX的系统不关心文件扩展名（此处为“.js”），因此不知道使用哪种语言。我们必须告诉系统使用Node来运行脚本。为此，我们在文件开头添加注释行：#!/usr/bin/envnodeconsole.log('HelloWorld!');创建一个空白的HTML页面我们将创建一个CLI来生成HTML文件，为此，我们将使用Node.js文件系统模块。该模块是Node的内置模块，提供与文件系统交互的API，即可以创建、读取、修改和删除文件。我们只需要使用文件系统模块的writeFile方法，它允许您创建文件。#!/usr/bin/envnodeconstfs=require('fs');consthtml=`
标题`;fs.writeFile('index.html',html,error=>{if(error){console.log(error);}});如果您再次在终端中保存并运行html-generator-cli，您现在应该会在文件夹中看到一个index.html文件。将参数传递给代码既然我们生成的文件名和HTML中标题标签的内容是硬编码的，我们应该能够将文件名和标题作为参数传递给CLI。要传递参数，您只需在命令后写入参数，这些参数在名为argv的变量中可供进程使用。在你的代码中写这样的东西：constargs=process.argv;控制台日志（参数）；并在终端中运行：html-generator-clihellohaha??然后，你应该在控制台中看到一条消息，其中包含参数为字符串数组：传递的参数是数组的最后一项，我们只需要使用数组的slice(2)方法来获取它。我们决定第一个输入参数是文件名（没有HTML扩展名），第二个参数是HTML页面的标题。这些参数都不是必需的，如果没有提供名称和标题，我们将把文件称为index.html，标题为“Title”。#!/usr/bin/envnodeconstfs=require('fs');constargs=process.argv.slice(2);letfileName=args[0]？`${args[0]}.html`:'index.html';lettitle=args[1]||'标题';consthtml=`${title}`;fs.writeFile(fileName,html,error=>{if(error){console.log(error);}});我们保持简单，不验证用户输入，以防用户可能为文件提供了无效名称，这是您在实践中必须验证的内容。现在，您可以在终端中尝试以下操作：html-generator-clipage“newgenerator”resultsusingparameteroptions以前的方法很容易实现，但有一些缺点：用户必须知道期望哪些参数以及参数的顺序.如果他不想给文件名，他也没有办法给标题，我们可以通过创建选项来改善这一点。我们可以构建CLI来让用户像这样输入文件名和/或标题，而不是一个一个地编写参数。html-generator-cli--file-namepage--html-title"newgenerator"写起来有点长，但是用户更清楚他给的是什么参数，命令不行了，可以给一个标题，即使你没有给任何文件名。constargs=process.argv;constFILE_NAME_OPTION='--文件名';constHTML_TITLE_OPTION='--html-title';constfileNameOptionIndex=args.findIndex(arg=>arg===FILE_NAME_OPTION);consthtmlTitleOptionIndex=args.findIndex(arg=>arg===HTML_TITLE_OPTION);constfileNameOption=fileNameOptionIndex>-1&&args[fileNameOptionIndex+1];consttitleOption=htmlTitleOptionIndex>-1&&args[htmlTitleOptionIndex+1];letfileName=`fileName$Option?{fileNameOption}.html`:'index.html';lettitle=titleOption||'标题';现在我们在参数数组args中获得选项--file-name或--html-title的索引。如果存在选项，则赋予文件名或标题的值是参数数组中--file-name或--html-file之后的元素。如果没有选项，则其索引将为-1。如果这个索引是-1或者arguments数组中这个选项后面没有值，我们分别为文件名或标题提供默认值。其余代码没有改变。您可以运行新的CLI，如果未选择任何内容，它将创建一个名为“Title”的index.html文件。如果你写了一个选项但忘记提供一个值，它也会提供默认值。如果您使用给定的选项正确编写命令，那么它应该创建一个具有正确名称和正确HTML标题的文件。html-generator-cli--file-namehello--html-title"CLIhelloworld!"同样的效果，在实际的CLI中，你会想要检查一些输入，首先要确保用户输入的值是有效的，但是如果缺失值或选项出现两次也会警告。向用户询问参数使用选项已经是一种改进，但它仍然需要用户知道他可以传递哪些参数以及使用哪个标志。当你初始化你的npm项目时，你可以将很多东西作为选项传递。CLI直接问你问题，所以你不需要阅读文档来弄清楚如何提供项目名称、版本等。要从控制台读取用户输入，我们需要Node提供的模块readline（从版本7开始).您可以在终端中使用以下命令对其进行测试：constreadline=require('readline');constinterface=readline.createInterface({输入：process.stdin，输出：process.stdout});interface.question('你叫什么名字？',answer=>{console.log(`Hello${answer}`);interface.close();});它是这样工作的为了生成我们的HTML页面，我们首先询问文件名，然后询问标题。如果用户没有输入任何内容，我们将获得默认值。我们向用户展示默认值是什么，以便他们可以跳过默认值是否正确的问题。#!/usr/bin/envnodeconstfs=require('fs');constreadline=require('readline');letfileName='index.html';lettitle='Title';constinterface=readline.createInterface({input:process.stdin,output:process.stdout});interface.question(`Filename(${fileName}):`,answer=>{if(answer&&answer.length){fileName=`${answer}.html`;}interface.question(`HTMLtitle(${title}):`,answer=>{if(answer&&answer.length){title=answer;}interface.close();consthtml=`${title}`;fs.writeFile(fileName,html,error=>{if(error){console.log(error);}});});});如果您在终端中运行它，将询问两个问题。用户不必知道您的CLI选项，所有重要的事情都可以直接询问。但是，您应该只通过这种方式询问主要的配置问题，并让用户阅读文档以了解不太常见的选项。我们使用Node和npm创建了一个简单的CLI，允许用户生成一个空白的HTML文件，是不是很简单？您可以通过添加新选项和验证用户输入来改进此示例。文章首发《前端外文精选》微信公众号继续阅读其他好评文章2020年12篇Vue.js开发技巧【小技巧】CSS如何实现文本对齐？7道简单但有技巧的JavaScript面试题，让你2020年成为前端高手。9个项目【实战】Vue。上）【笔记】Web全栈工程师的自我修养（下）【小贴士】如何防止H5页面弹出手机虚拟键盘？拒绝JavaScript，这三个CSS技巧你一定要用好ChromeDevTools的7个隐藏功能，可以提高你的工作效率【图文教程】同步你的VSCode设置和扩展插件，换手机不用愁更多...
