初始化项目
mkdir aotu-cli
npm init -y
npm install eslint husky -D
初始化 eslint 配置文件
npm eslint --init
依次选择
To check syntax and find problems
CommonJS (require/exports)
None of these
Does your project use TypeScript?(Y/n) n
Where does your code run? Node
What format do you want your config file to be in? JSON
配置完后,项目根目录会生成 .eslintrc.json
工程创建
添加配置文件
创建 bin\www 文件 全局命名执行根文件, 写入以下:
#!/usr/bin/env node
console.log('aotu-cli')
#!/usr/bin/env node 表示我要用系统中的这个目录/user/bin/env的node环境来执行此文件，且需要注意必须放在文件开头
在 package.json 中添加如下配置:
"bin": {
"aotu": "./bin/www"
}
npm link
link 将一个任意位置的 npm 包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。 npm link命令通过链接目录和可执行文件，实现npm包命令的全局可执行
npm link
在终端 执行 aotu
发现 屏幕输出了 aotu-cli
编写 Cli
在 bin/www 文件 引入 main.js 作为我们项目入口
#!/usr/bin/env node
require('../src/main.js')
使用 commander
ommander是npm依赖排名前十之一的模块,主要作用为命令行辅助
安装模块
npm install commander
在 src/main.js 写些东西
const program = require('commander');
const _version = require('../package.json').version;
const program = require('commander');
program.version(_version)
.parse(process.argv);
在终端中执行 aotu-cli -help,发现有两个命名命名执行下 aotu-cli -V
发现打印了 版本号 1.0.0
下面我们来玩点花的 🐶
安装 figlet 生成一些特殊的文字
npm install figlet
安装 @darkobits/lolcatjs 生成颜色
npm install @darkobits/lolcatjs
修改 main.js
const figlet = require('figlet');
const versionStr = figlet.textSync('Aotu');
const Printer = require('@darkobits/lolcatjs')
program.version(
Printer.default.fromString(
` \n 席坤的手架${_version}\n www.47.98.161.153:8082 \n${versionStr}`
))
program.parse(process.argv);
让我们再执行一次 auto -v
发现控制台生成了 花里胡哨 🐶
接下来让我们开始接受用户命令行的输入
新建命名
npm install inquirer chalk ora shelljs download-git-repo
inquirer 交互式命令行,可以和用户进行交互
chalk node终端样式库
ora Node.js 终端加载动画效果
shelljs Nodejs使用ShellJS操作目录文件
download-git-repo 从git仓库下载代码
我们来自定义一些命名
program.option('init', '初始化项目🔧', 'blue')
.option('json2ts', '输入接口地址,自动生成TypeScript类 🥱')
接收命名
program
.usage(`${chalk.green('<cmd>')} <options>`)
.arguments('<cmd> [env]')
.action(function (cmd, ages) {
const handler = bindHandler[cmd];
if (typeof handler === 'undefined') {
ora(chalk.red(`命令${cmd}:`) + chalk.red('暂未支持')).fail();
} else {
handler(ages);
}
});
使用 inquirer 定义一些操作
const prompt = [
{
type: 'input',
name: 'projectName',
message: '请输入项目命名😄',
filter: function (val) {
return val
}
},
{
type: 'list',
name: 'jskind',
message: '请选择使用的模板',
default: 0,
choices: [
{
name: 'ECMAScript6',
value: 'es6',
url: '123'
}, {
name: 'TypeScript',
value: 'ts',
url: '456'
}
]
}
]
封装 bindHandler 对对应的命名就是操作
const bindHandler = {
init() {
inquirer.prompt(questions).then(answers => {
projectName = answers.projectName
const _pwd = process.cwd();
// 用户全路径
projectPath = `${_pwd}/${projectName}`;
// 检查路径是否存在
checkAppName(projectPath, projectName)
const spinner = ora(`⏰ ${chalk.red('downloading template')}`).start();
// 项目模版地址
const url = `direct:https://github.com/LiLixikun/${answers.jskind}.git`;
// 执行下载任务
download(url, projectPath, { clone: true }, function (err) {
spinner.stop();
if (err) {
console.log(chalk.red('下载失败 😭'));
process.exit(-1)
} else {
spinner.succeed(`${chalk.green('下载成功 😄')}`)
// 修改项目名称
shell.sed(
'-i',
'aotu',
projectName,
projectPath + '/package.json'
);
}
});
}).catch(error => {
console.log(chalk.red('脚手架出现异常,请联系 xx 📧'));
})
},
json2ts() {
createServer()
}
}
现在我们在终端来验证下
下一章节我们介绍如何搭建可视化界面操作
