搭建一个nodejs脚手架的方法步骤

2023-08-20 19:49:05 383

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

相关命令可以如下

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等，要想了解更多，就要深入了解，这里只是打开一扇门，学海无涯。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

搭建一个nodejs脚手架的方法步骤

热门推荐

随机推荐