前言在我们平时的项目开发中，往往会有很多类似的代码文件，我们在使用的时候也经常会复制粘贴。为此，我之前也写过一篇文章，讨论提高开发效率的方法，但是说实话，用处不大。纵观如今火热的前端框架，它们都有自己的CLI工具，比如VueCLI、creat-react-app等，构建项目非常方便。所以我也在想，如果我也实现一个CLI工具，不一定要像前面那些那么高大上，但只要能提高工作效率，还是值得一试的。初始化项目首先我们需要打开CLI界面，用npm初始化一个项目：npminitpackage.json{"name":"mycli","version":"1.0.0","description":"Acli-demo","main":"index.js","author":"xmanlin","license":"MIT"}其中一些不需要的已被删除。自定义命令相信很多小伙伴在使用npm初始化项目，或者使用VueCLI构建项目的时候，都会发现一个共同点——都有自己的个性化命令，感觉有点酷.那么我们如何实现自己的命令呢？这很简单。添加bin到package.json:{"name":"mycli","version":"1.0.0","description":"Acli-demo","main":"index.js","bin":{"mycli":"./index.js"},"author":"xmanlin","license":"MIT"}bininpackage.json的作用是让setmycli成为可执行命令，并且命令执行的文件就是下面这个index.js，可以根据自己的想法来确定。然后我们继续修改index.js：index.js#!/usr/bin/envnodeconsole.log("Executionsucceeded")这里第一行很重要，说明index.js是一个node可执行文件。设置完成后，我们可以全局安装我们的CLI工具：npminstall-g+mycli@1.0.0added1packagefrom1contributorin0.12s可以看到全局安装成功，最后我们试试我们的命令：myclioutput:Executionsucceeded交互式命令行刚才小伙伴们在进行命令行操作的时候，使用的命令都是带有不同选项的，比如npminit，npminstall-g，其中就包含了一些交互式的。比如在初始化项目的时候，npminit提供了一些问答形式的输入命令。接下来，让我们将这些类似的命令添加到我们自己的CLI工具中。我们的开发可以依赖两个库：commander.js和Inquirer.jscommander.js：一个完整??的node.js命令行解决方案。我们可以用它来快速编写我们的命令行和自定义操作。Inquirer.js：它是常规交互式命令行用户界面的集合，为Node.js提供了方便、美观的命令行界面用于嵌入。我们可以用它来快速编写交互式命令行。这两个库的具体用法，这里介绍的太多了，小伙伴们可以点击上面名字的链接熟悉一下，不会花太多时间，实际使用起来也不难，后面的一个没有中文Readme，不过不妨碍大家自己搜~对吧？定义选项让我们首先实现类似的命令选项，如npm-v和node-v。先安装commander.js：npminstallcommander然后引入commander.js，修改index.js#!/usr/bin/envnodeconst{program}=require('commander');//字符串拆分成数组的方法functionstrToArr(value,preValue){returnvalue.split(',')}//cli版本program.version(require('./package').version,'-v,--version','最新版本的cliVersion');//设置选项program.option('-d,--debug','debug').option('-l,--list','Splitthestringintoarray',strToArr).action((options,command)=>{//逻辑处理if(options.debug){console.log("调试成功")}if(options.list!==undefined){console.log(options.list)}});//处理命令行输入参数program.parse(process.argv);让我们试试刚刚设置的命令选项：mycli-d输出：调试成功输入：mycli-l1,2,3输出：['1','2','3']已经在commander.js中为我们定义了--helpoption:mycli-houtput:Usage:index[options]Options:-v,--version最新版本的cli-d,--debugdebugit-l,--list将字符串分割成一个数组-h,--help显示命令的帮助使用--help选项，我们可以清楚知道mycli有多少个命令和子命令在项目开发中，我们有时会使用npmrunxxx这样的命令，其中run相当于npm的一个子命令。这里我们也可以给mycli设置一个类似的子命令：const{program}=require('commander');...//创建文件命令行program.command('create').description('Createafile').action((filename)=>{console.log(filename)})...//处理命令行输入参数program.parse(process.argv);command('create')isCreates一个myclicreate子命令，后跟一个必需的参数。输入：myclicreatefile输出文件子命令创建成功。使用命令行创建项目文件我们现在可以定义选项和设置命令。然后我们就可以实际做点什么了，使用命令行来创建工程文件。简单设计一个流程：创建模板文件。我们先创建一个templates文件夹，然后在里面写几个常用的模板文件。这里的模板文件使用模板字符串。结构如下：reactClass.jsmodule.exports=function(className){return`import*asReactfrom'react';exportclass${className}extendsReact.Component{constructor(props){super(props);this.state={}}componentDidMount(){}render(){return()}}`}vueTemplate.jsmodule.exports=function(){return`
