怎样搭建一个nodejs脚手架

这篇文章将为大家详细讲解有关怎样搭建一个nodejs脚手架,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

1 前言

1.1

像我们熟悉的 vue-cli,taro-cli 等脚手架,只需要输入简单的命令taro init project ,即可快速帮我们生成一个初始项目。在日常开发中,有一个脚手架工具可以用来提高工作效率。

1.2 为什么需要脚手架

  1. 减少重复性的工作,从零创建一个项目和文件。

  2. 根据交互动态生成项目结构和配置文件等。

  3. 多人协作更为方便,不需要把文件传来传去。

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 新建一个文件夹,然后npm init初始化

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

npm link 命令可以将一个任意位置的 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<name>')
.action((name)=>{
console.log(name)
})

program.parse(process.argv)

可以通过lq -v 来查看版本号 通过lq init name 的操作,action里面会打印出name

2.2.3 对console的美工

我们看到taro init 命令里面会有一些颜色标识,就是因为引入了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<name>')
.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.6 ora进度显示

npminstall--saveora

相关命令可以如下

constora=require('ora')
//开始下载
constproce=ora('正在下载模板...')
proce.start()

//下载失败调用
proce.fail()

//下载成功调用
proce.succeed()

2.2.6 log-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<name>')
.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)

关于“怎样搭建一个nodejs脚手架”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

发布于 2021-02-16 20:42:52
分享
海报
178
上一篇:微信小程序如何搭建开发环境 下一篇:HTML5中&lt;template&gt;标签有什么用
目录

    推荐阅读

    忘记密码?

    图形验证码