开发一个Parcel-vue脚手架工具(详细步骤)
前言
像我们熟悉的vue-cli,create-react-app等脚手架,只需要输入简单的命令vueinitwebpackproject,即可快速帮我们生成一个初始项目。在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率。
为什么需要需要脚手架?
- 减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件。
- 根据交互动态生成项目结构和配置文件等。
- 多人协作更为方便,不需要把文件传来传去。
思路
要开发脚手架,首先要理清思路,脚手架是如何工作的?我们可以借鉴vue-cli的基本思路。vue-cli是将项目模板放在git上,运行的时候再根据用户交互下载不同的模板,经过模板引擎渲染出来,生成项目。这样将模板和脚手架分离,就可以各自维护,即使模板有变动,只需要上传最新的模板即可,而不需要用户去更新脚手架就可以生成最新的项目。那么就可以按照这个思路来进行开发了。
第三方库
首先来看看会用到哪些库。
- commander.js,可以自动的解析命令和参数,用于处理用户输入的命令。
- download-git-repo,下载并提取git仓库,用于下载项目模板。
- Inquirer.js,通用的命令行用户界面集合,用于和用户进行交互。
- handlebars.js,模板引擎,将用户提交的信息动态填充到文件中。
- ora,下载过程久的话,可以用于显示下载中的动画效果。
- chalk,可以给终端的字体加上颜色。
- log-symbols,可以在终端上显示出√或×等的图标。
初始化项目
首先创建一个空项目,然后新建一个index.js文件,再执行npminit生成一个package.json文件。最后安装上面需要用到的依赖。
npminstallcommanderdownload-git-repoinquirerhandlebarsorachalklog-symbols-S
处理命令行
node.js内置了对命令行操作的支持,在package.json中的bin字段可以定义命令名和关联的执行文件。所以现在package.json中加上bin的内容:
{ "name":"suporka-parcel-vue", "version":"1.0.0", "description":"avuecliwhichuseparceltopackageobject", "bin":{ "suporka-parcel-vue":"index.js" }, ... }
然后在index.js中来定义init命令:
#!/usr/bin/envnode constprogram=require('commander'); program.version('1.0.0','-v,--version') .command('init') .action((name)=>{ console.log(name); }); program.parse(process.argv);
调用version('1.0.0','-v,--version')会将-v和--version添加到命令中,可以通过这些选项打印出版本号。
调用command('init
action()则是执行init命令会发生的行为,要生成项目的过程就是在这里面执行的,这里暂时只打印出name。
其实到这里,已经可以执行init命令了。我们来测试一下,在同级目录下执行:
nodeindex.jsinitHelloWorld
可以看到命令行工具也打印出了HelloWorld,那么很清楚,action((name)=>{})这里的参数name,就是我们执行init命令时输入的项目名称。
命令已经完成,接下来就要下载模板生成项目结构了。
下载模板
download-git-repo支持从Github、Gitlab和Bitbucket下载仓库,各自的具体用法可以参考官方文档。
命令行交互
命令行交互功能可以在用户执行init命令后,向用户提出问题,接收用户的输入并作出相应的处理。这里使用inquirer.js来实现。
constinquirer=require('inquirer'); inquirer.prompt([ { name:'description', message:'Inputtheobjectdescription' }, { name:'author', message:'Inputtheobjectauthor' } ]).then((answers)=>{ console.log(answers.author); })
通过这里例子可以看出,问题就放在prompt()中,问题的类型为input就是输入类型,name就是作为答案对象中的key,message就是问题了,用户输入的答案就在answers中,使用起来就是这么简单。更多的参数设置可以参考官方文档。
通过命令行交互,获得用户的输入,从而可以把答案渲染到模板中。
渲染模板
这里用handlebars的语法对模板中的package.json文件做一些修改
{ "name":"{{name}}", "version":"1.0.0", "description":"{{description}}", "scripts":{ "test":"echo\"Error:notestspecified\"&&exit1" }, "author":"{{author}}", "license":"ISC" }
并在下载模板完成之后将用户输入的答案渲染到package.json中
视觉美化
在用户输入答案之后,开始下载模板,这时候使用ora来提示用户正在下载中。
constora=require('ora'); //开始下载 constspinner=ora('正在下载模板...'); spinner.start(); //下载失败调用 spinner.fail(); //下载成功调用 spinner.succeed();
然后通过chalk来为打印信息加上样式,比如成功信息为绿色,失败信息为红色,这样子会让用户更加容易分辨,同时也让终端的显示更加的好看。
constchalk=require('chalk'); console.log(chalk.green('项目创建成功')); console.log(chalk.red('项目创建失败'));
除了给打印信息加上颜色之外,还可以使用log-symbols在信息前面加上√或×等的图标
constchalk=require('chalk'); constsymbols=require('log-symbols'); console.log(symbols.success,chalk.green('项目创建成功')); console.log(symbols.error,chalk.red('项目创建失败'));
完整示例
//index.js #!/usr/bin/envnode //处理用户输入的命令 constprogram=require('commander'); //下载模板 constdownload=require('download-git-repo'); //问题交互 constinquirer=require('inquirer'); //node文件模块 constfs=require('fs'); //填充信息至文件 consthandlebars=require('handlebars'); //动画效果 constora=require('ora'); //字体加颜色 constchalk=require('chalk'); //显示提示图标 constsymbols=require('log-symbols'); //命令行操作 varshell=require("shelljs"); program.version('1.0.1','-v,--version') .command('init') .action((name)=>{ if(!fs.existsSync(name)){ inquirer.prompt([ { name:'description', message:'Inputtheobjectdescription' }, { name:'author', message:'Inputtheobjectauthor' } ]).then((answers)=>{ constspinner=ora('Downloading...'); spinner.start(); download('zxpsuper/suporka-parcel-vue',name,(err)=>{ if(err){ spinner.fail(); console.log(symbols.error,chalk.red(err)); }else{ spinner.succeed(); constfileName=`${name}/package.json`; constmeta={ name, description:answers.description, author:answers.author } if(fs.existsSync(fileName)){ constcontent=fs.readFileSync(fileName).toString(); constresult=handlebars.compile(content)(meta); fs.writeFileSync(fileName,result); } console.log(symbols.success,chalk.green('Thevueobjecthasdownloadedsuccessfully!')); inquirer.prompt([ { type:'confirm', name:'ifInstall', message:'Areyouwanttoinstalldependencenow?', default:true } ]).then((answers)=>{ if(answers.ifInstall){ inquirer.prompt([ { type:'list', name:'installWay', message:'Choosethetooltoinstall', choices:[ 'npm','cnpm' ] } ]).then(ans=>{ if(ans.installWay==='npm'){ letspinner=ora('Installing...'); spinner.start(); //命令行操作安装依赖 shell.exec("cd"+name+"&&npmi",function(err,stdout,stderr){ if(err){ spinner.fail(); console.log(symbols.error,chalk.red(err)); } else{ spinner.succeed(); console.log(symbols.success,chalk.green('Theobjecthasinstalleddependencesuccessfully!')); } }); }else{ letspinner=ora('Installing...'); spinner.start(); shell.exec("cd"+name+"&&cnpmi",function(err,stdout,stderr){ if(err){ spinner.fail(); console.log(symbols.error,chalk.red(err)); } else{ spinner.succeed(); console.log(symbols.success,chalk.green('Theobjecthasinstalleddependencesuccessfully!')); } }) } }) }else{ console.log(symbols.success,chalk.green('Youshouldinstallthedependencebyyourself!')); } }) } }) }) }else{ //错误提示项目已存在,避免覆盖原有项目 console.log(symbols.error,chalk.red('Theobjecthasexist')); } }); program.parse(process.argv);
npmpublish发布你的项目即可。
本地测试nodeindexinitparcel-vue
以上是我写的一个suporka-parcel-vue的脚手架源码,suporka-parcel-vue点击即可查看,欢迎star.希望对大家的学习有所帮助,也希望大家多多支持毛票票。