共计 3966 个字符,预计需要花费 10 分钟才能阅读完成。
1 前言
1.1
像咱们相熟的 vue-cli,taro-cli 等脚手架,只须要输出简略的命令 taro init project
,即可疾速帮咱们生成一个初始我的项目。在日常开发中,有一个脚手架工具能够用来进步工作效率。
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,能够给终端的字体加上色彩。
- og-symbols,能够在终端上显示出 √ 或 × 等的图标
2.2 上手
2.2.1 新建一个文件夹,而后 npm init 初始化
npm 不单单用来治理你的利用和网页的依赖,你还能用它来封装和散发新的 shell 命令。
$ mkdir lq-cli
$ npm init
这时在咱们的 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/env node
console.log('Hello, cli!');
到这一步就能够简略运行一下这个命令
npm link
lq
npm link 命令能够将一个任意地位的 npm 包链接到全局执行环境,从而在任意地位应用命令行都能够间接运行该 npm 包。
控制台会输入Hello, cli!
2.2.2 捕捉 init 之类的命令
后面的一个大节,能够跑一个命令行了,然而咱们看到的 taro-cli 中还有一些命令,init 初始化我的项目之类。这个时候 commander
就须要利用起来了。
运行上面的这个命令将会把最新版的 commander 退出 package.json
npm install --save commander
引入 commander 咱们将 index.js 做如下批改
#!/usr/bin/env node
console.log('Hello, cli!')
const program = 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 一样
npm install --save chalk
console.log(chalk.green(‘init 创立 ’))
这样会输入一样绿色的
2.2.4 模板下载
download-git-repo 反对从 Github 下载仓库,具体理解能够参考官网文档。
npm install --save download-git-repo
download() 第一个参数就是仓库地址, 具体理解能够看官网文档
2.2.5 命令行的交互
命令行交互性能能够在用户执行 init 命令后,向用户提出问题,接管用户的输出并作出相应的解决。用 inquirer.js 来实现。
npm install --save inquirer
index.js 文件如下
#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init 创立'))
const program = require('commander')
const download = require('download-git-repo')
const inquirer = 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)
参考 nodejs 进阶视频解说:进入学习
2.2.6 ora 进度显示
npm install --save ora
相干命令能够如下
const ora = require('ora')
// 开始下载
const proce = ora('正在下载模板...')
proce.start()
// 下载失败调用
proce.fail()
// 下载胜利调用
proce.succeed()
2.2.6 log-symbols 在信息后面加上 √ 或 × 等的图标
npm install --save log-symbols
相干命令能够如下
const chalk = require('chalk')
const symbols = require('log-symbols')
console.log(symbols.success, chalk.green('SUCCESS'))
console.log(symbols.error, chalk.red('FAIL'))
2.2.7 残缺文件如下
#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init 创立'))
const fs = require('fs')
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
const ora = require('ora')
const symbols = require('log-symbols')
const handlebars = require('handlebars')
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)
const lqProcess = ora('正在创立...')
lqProcess.start()
download(
'direct:https://github.com/Chant-Lee/rick-cli-templates1.git',
name,
{clone: true},
err => {if (err) {lqProcess.fail()
console.log(symbols.error, chalk.red(err))
} else {lqProcess.succeed()
const fileName = `${name}/package.json`
const meta = {
name,
author: answers.author
}
if (fs.existsSync(fileName)) {const content = fs.readFileSync(fileName).toString()
const result = handlebars.compile(content)(meta)
fs.writeFileSync(fileName, result)
}
console.log(symbols.success, chalk.green('创立胜利'))
}
}
)
})
})
program.parse(process.argv)
总结
通过下面的例子只是可能搭建出一个简略的脚手架工具,其实 bash 还能够做很多货色,比方 npm 包优雅地解决规范输出、治理并行任务、监听文件、管道流、压缩、ssh、git 等,要想理解更多,就要深刻理解,这里只是关上一扇门,学海无涯。