搭建一个nodejs脚手架的方法步骤
1前言
1.1
像我们熟悉的vue-cli,taro-cli等脚手架,只需要输入简单的命令 taroinitproject,即可快速帮我们生成一个初始项目。在日常开发中,有一个脚手架工具可以用来提高工作效率。
1.2为什么需要脚手架
- 减少重复性的工作,从零创建一个项目和文件。
- 根据交互动态生成项目结构和配置文件等。
- 多人协作更为方便,不需要把文件传来传去。
1.3怎样来搭建呢?
脚手架是怎么样进行构建的呢,我是借助了 taro-cli的思路。
1.4本文的目标读者
1想要学习更多和了解更多的人
2对技术充满热情
2搭建前准备
2.1第三方工具
commander.js,可以自动的解析命令和参数,用于处理用户输入的命令。
download-git-repo,下载并提取git仓库,用于下载项目模板。
Inquirer.js,通用的命令行用户界面集合,用于和用户进行交互。
handlebars.js,模板引擎,将用户提交的信息动态填充到文件中。
ora,下载过程久的话,可以用于显示下载中的动画效果。
chalk,可以给终端的字体加上颜色。
log-symbols,可以在终端上显示出√或×等的图标
2.2上手
2.2.1新建一个文件夹,然后npminit初始化
npm不单单用来管理你的应用和网页的依赖,你还能用它来封装和分发新的shell命令。
$mkdirlq-cli $npminit
这时在我们的 lq-cli项目中有package.json文件,然后需要创建一个JS文件包含我们的脚本就取名index.js吧。package.json内容如下
{ "name":"lq-shell", "version":"1.0.0", "description":"脚手架搭建", "main":"index.js", "bin":{ "lq":"./index.js" }, "scripts":{ "test":"test" }, "keywords":[ "cli" ], "author":"prune", "license":"ISC" }
index.js内容如下
#!/usr/bin/envnode console.log('Hello,cli!');
到这一步就可以简单运行一下这个命令
npmlink lq
npmlink命令可以将一个任意位置的npm包链接到全局执行环境,从而在任意位置使用命令行都可以直接运行该npm包。控制台会输出 Hello,cli!
2.2.2捕获init之类的命令
前面的一个小节,可以跑一个命令行了,但是我们看到的taro-cli中还有一些命令,init初始化项目之类。这个时候 commander就需要利用起来了。运行下面的这个命令将会把最新版的commander加入package.json
npminstall--savecommander
引入commander我们将index.js做如下修改
#!/usr/bin/envnode console.log('Hello,cli!') constprogram=require('commander') program .version(require('./package').version,'-v,--version') .command('init') .action((name)=>{ console.log(name) }) program.parse(process.argv)
可以通过 lq-v来查看版本号通过 lqinitname的操作,action里面会打印出name
2.2.3对console的美工
我们看到taroinit命令里面会有一些颜色标识,就是因为引入了chalk这个包,同样和commander一样
npminstall--savechalk
console.log(chalk.green('init创建'))
这样会输出一样绿色的
2.2.4模板下载
download-git-repo支持从Github下载仓库,详细了解可以参考官方文档。
npminstall--savedownload-git-repo
download()第一个参数就是仓库地址,详细了解可以看官方文档
2.2.5命令行的交互
命令行交互功能可以在用户执行init命令后,向用户提出问题,接收用户的输入并作出相应的处理。用inquirer.js来实现。
npminstall--saveinquirer
index.js文件如下
#!/usr/bin/envnode constchalk=require('chalk') console.log('Hello,cli!') console.log(chalk.green('init创建')) constprogram=require('commander') constdownload=require('download-git-repo') constinquirer=require('inquirer') program .version(require('./package').version,'-v,--version') .command('init') .action((name)=>{ console.log(name) inquirer.prompt([ { type:'input', name:'author', message:'请输入你的名字' } ]).then((answers)=>{ console.log(answers.author) download('', name,{clone:true},(err)=>{ console.log(err?'Error':'Success') }) }) }) program.parse(process.argv)
2.2.6ora进度显示
npminstall--saveora
相关命令可以如下
constora=require('ora') //开始下载 constproce=ora('正在下载模板...') proce.start() //下载失败调用 proce.fail() //下载成功调用 proce.succeed()
2.2.6log-symbols在信息前面加上√或×等的图标
npminstall--savelog-symbols
相关命令可以如下
constchalk=require('chalk') constsymbols=require('log-symbols') console.log(symbols.success,chalk.green('SUCCESS')) console.log(symbols.error,chalk.red('FAIL'))
2.2.7完整文件如下
#!/usr/bin/envnode constchalk=require('chalk') console.log('Hello,cli!') console.log(chalk.green('init创建')) constfs=require('fs') constprogram=require('commander') constdownload=require('download-git-repo') constinquirer=require('inquirer') constora=require('ora') constsymbols=require('log-symbols') program .version(require('./package').version,'-v,--version') .command('init') .action((name)=>{ console.log(name) inquirer.prompt([ { type:'input', name:'author', message:'请输入你的名字' } ]).then((answers)=>{ console.log(answers.author) constlqProcess=ora('正在创建...') lqProcess.start() download('github:/Mr-Prune/learn/mongodb-koa', name,{clone:true},(err)=>{ if(err){ lqProcess.fail() console.log(symbols.error,chalk.red(err)) }else{ lqProcess.succeed() constfileName=`${name}/package.json` constmeta={ name, 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('创建成gong')) } }) }) }) program.parse(process.argv)
总结
通过上面的例子只是能够搭建出一个简单的脚手架工具,其实bash还可以做很多东西,比如npm包优雅地处理标准输入、管理并行任务、监听文件、管道流、压缩、ssh、git等,要想了解更多,就要深入了解,这里只是打开一扇门,学海无涯。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。