手写cli

Posted 2020-12-21 yixin25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手写cli相关的知识，希望对你有一定的参考价值。

惠善一的博客：http://huishanyi.club/

通过命令行工具，初始化团队项目，并生成团队规范代码，一键创建项目，一键生成代码，一键生成功能模块···
解放双手，从 cli 开始， JSer 永不为奴！

创建项目目录

两种方法：

鼠标右键创建文件夹，文件夹名称即为项目名称；
打开系统命令面板（powershell、cmd···），输入命令：
- ```
mkdir 项目名称
```

初始化 node 项目

在项目文件目录运行命令：

npm init

运行命令后会出现如下提示（按照提示完成即可）：

根据提示完成操作后，会在项目根目录生成项目描述文件package.json，可以回车跳过以下步骤，后续在package.json文件中完善项目信息。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: 项目名称
version: 版本号
description: 项目描述
entry point: (index.js)入口
test command: 测试相关
git repository: git仓库地址
keywords: 关键词
author: 作者
license: 证书
About to write to E:***package.json:

{
  "name": "***",
  "version": "***",
  "description": "***",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "***",
  "license": "ISC"
}


Is this OK? (yes) yes

安装相关依赖

项目后续会使用以下依赖包。

运行命令：

npm i commander download-git-repo ora handlebars figlet clear chalk open

依赖包介绍：

commander（完整的 node.js 命令行解决方案）
download-git-repo（从节点下载并提取仓库（GitHub, GitLab, Bitbucket））
ora（终端进度条）
handlebars（轻量的语义化模板）
figlet（终端实现图形字体）
clear（终端清屏）
chalk（终端字符串样式）
open（跨平台级的，可打开 url、文件、可执行脚本）

创建 cli 入口文件

项目根目录创建文件夹bin，在bin文件夹中创建mycli.js（自定义）文件。

文件内容如下：

#!/usr/bin/env node
// 第一行为约定脚本解释器以 node 进行解析，必须放在文件第一行！行首不能有任何字符！

定义执行命令

打开package.json文件，添加相关代码（句首有+号的代码为新增代码）：

{
  "name": "***",
  "version": "***",
  "description": "***",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  + "bin": {
  +   "mycli": "./bin/mycli.js"
  + },
  "author": "***",
  "license": "ISC",
  "dependencies": {
    "chalk": "^4.1.0",
    "clear": "^0.1.0",
    "commander": "^6.2.0",
    "download-git-repo": "^3.0.2",
    "figlet": "^1.5.0",
    "handlebars": "^4.7.6",
    "open": "^7.3.0",
    "ora": "^5.1.0"
  }
}

映射命令至系统

将package.json文件中刚添加的bin命令映射至系统中。

运行命令：

npm link

此时我们可以全局使用bin中的mycli命令了。

npm link机理：由于已经安装好 node 环境，故此我们可以直接全局使用node与npm命令，而npm link则是将package.json中bin下的命令通过npm与系统环境变量桥接，所以我们可以全局使用bin中的命令。

至此我们实现了 cli 的第一步：可以全局使用我们自定义的命令了~~~
莫要问我为什么在这里用了彩色的字。。。
因为我比较————
骚！

定制命令行界面

在入口文件bin => mycli.js中进行命令行界面定制。

#!/usr/bin/env node
const program = require(‘commander‘)	// 引入 commander

program.version(require(‘../package.json‘).version)	// 声明 cli 当前版本，如：输入mycli -V 命令，即可显示当前 cli 版本

program
    .command(‘init <name>‘)			// 定义使用命令，如：命令 mycli init <name> 
    .description(‘init project‘)	// 命令描述
    .action(name => {				// 该命令对应的动作
        console.log(‘init--------‘+name);
    })

program.parse(process.argv)			// 将命令参数暴露出去，供使用者使用

定制初始化功能

在根目录中创建lib文件夹，在lib文件夹中创建init.js文件，用于编写初始化功能代码。

基础结构搭建

初始化功能基础代码结构。

lib => init.js文件代码如下：

const { promisify } = require(‘util‘)		// node 核心模块 util，其中的 promisify 方法可以将异步回调方法改造成返回 Promise 实例的方法
const figlet = promisify(require(‘figlet‘))	// 以 promise 形式引入 figlet 模块，figlet 可以式代码以图形出现在终端
const clear = require(‘clear‘)				// 终端清屏
const chalk = require(‘chalk‘);				// 终端字符串样式定制
const colorLog = (content, color) => console.log(chalk[color||‘green‘](content));// 封装日志输出，可定制颜色

module.exports = async name => {
    clear();
    const data = await figlet(‘Gisuni Welcome‘);
    colorLog(data,‘red‘)
}

连接功能与命令

bin => mycli.js对init方法进行引入并使用，代码如下：

#!/usr/bin/env node
const program = require(‘commander‘)	// 引入 commander

program.version(require(‘../package.json‘).version)	// 声明 cli 当前版本，如：输入mycli -V 命令，即可显示当前 cli 版本

program
    .command(‘init <name>‘)			// 定义使用命令，如：命令 mycli init <name> 
    .description(‘init project‘)	// 命令描述
-	.action(name => {				// 该命令对应的动作
-		console.log(‘init--------‘+name);
-	})
+	.action(require(‘../lib/init‘))

program.parse(process.argv)			// 将命令参数暴露出去，供使用者使用

下拉仓库功能

将仓库中的代码下拉至本地。

在lib文件夹中创建download.js文件，其代码如下：

const { promisify } = require(‘util‘)	// node 核心模块 util，其中的 promisify 方法可以将异步回调方法改造成返回 Promise 实例的方法

module.exports.clone = async (repo, desc) => {
    const download = promisify(require(‘download-git-repo‘))	// 以 promise 形式引入 download-git-repo 模块，download-git-repo 可以下拉仓库代码
    const ora = require(‘ora‘)	// 引入终端进度条代码
    const process = ora(`下载中··· ${repo}`)	// 进度条提示
    
    process.start()				// 进度条开始
    await download(repo, desc)	// 下拉仓库代码
    process.succeed()			// 进度条结束
}

引入下拉功能

将下拉功能引入至初始化模块中。

lib => init.js文件代码如下：

const { promisify } = require(‘util‘)		// node 核心模块 util，其中的 promisify 方法可以将异步回调方法改造成返回 Promise 实例的方法
const figlet = promisify(require(‘figlet‘))	// 以 promise 形式引入 figlet 模块，figlet 可以式代码以图形出现在终端
const clear = require(‘clear‘)				// 终端清屏
const chalk = require(‘chalk‘)				// 终端字符串样式定制
const colorLog = (content, color) => console.log(chalk[color||‘green‘](content)) // 封装日志输出，可定制颜色
+const { clone } = require(‘./download‘)	// 引入下拉功能模块

module.exports = async name => {
    clear();
    const data = await figlet(‘Gisuni Welcome‘);
    colorLog(data,‘red‘);
+	colorLog(`创建项目：${name}`);
+	await clone(‘github:用户名/项目名称‘, name);	// 如果项目克隆地址为：https://github.com/ShanYi-Hui/react-template.git，则此处应改造为：github:ShanYi-Hui/react-template
}

自动安装依赖

下拉的项目将自动安装依赖包。

lib => init.js文件代码如下：

const { promisify } = require(‘util‘)		// node 核心模块 util，其中的 promisify 方法可以将异步回调方法改造成返回 Promise 实例的方法
const figlet = promisify(require(‘figlet‘))	// 以 promise 形式引入 figlet 模块，figlet 可以式代码以图形出现在终端
const clear = require(‘clear‘)				// 终端清屏
const chalk = require(‘chalk‘)				// 终端字符串样式定制
const colorLog = (content, color) => console.log(chalk[color||‘green‘](content)) // 封装日志输出，可定制颜色
const { clone } = require(‘./download‘)	// 引入下拉功能模块

+const spawn = async (...args) => {
+	const { spawn } = require(‘child_process‘)	// node 核心模块 child_process，spawn 方法会异步地衍生子进程，且不阻塞 Node.js 事件循环
+	return new Promise(resolve => {
+	const proc = spawn(...args);
+		proc.stdout.pipe(process.stdout);
+		proc.stderr.pipe(process.stderr);
+		proc.on(‘close‘, () => {
+			resolve();
+		})
+	})
+}

module.exports = async name => {
    clear();
    const data = await figlet(‘Gisuni Welcome‘);
    colorLog(data,‘red‘);
	colorLog(`创建项目：${name}`);
	await clone(‘github:用户名/项目名称‘, name);	// 如果项目克隆地址为：https://github.com/ShanYi-Hui/react-template.git，则此处应改造为：github:ShanYi-Hui/react-template
+	colorLog(‘安装依赖中···‘);
+	await spawn(process.platform === ‘win32‘?‘npm.cmd‘:‘npm‘, [‘install‘], { cwd:`./${name}` });	// 安装依赖
+	colorLog(`
+安装完成！
+
+项目将自动启动，若未启动请执行如下命令:
+==============================
+	cd ${name}
+	npm run serve
+==============================
+	`);
+}

项目自启动

依赖安装完成后将自动打开浏览器，并在指定端口（默认 8080 端口）运行服务。

lib => init.js文件代码如下：

const { promisify } = require(‘util‘)		// node 核心模块 util，其中的 promisify 方法可以将异步回调方法改造成返回 Promise 实例的方法
const figlet = promisify(require(‘figlet‘))	// 以 promise 形式引入 figlet 模块，figlet 可以式代码以图形出现在终端
const clear = require(‘clear‘)				// 终端清屏
const chalk = require(‘chalk‘)				// 终端字符串样式定制
const colorLog = (content, color) => console.log(chalk[color||‘green‘](content)) // 封装日志输出，可定制颜色
const { clone } = require(‘./download‘)		// 引入下拉功能模块
+const open = require(‘open‘)				// 打开链接

const spawn = async (...args) => {
	const { spawn } = require(‘child_process‘)	// node 核心模块 child_process，spawn 方法会异步地衍生子进程，且不阻塞 Node.js 事件循环
	return new Promise(resolve => {
	const proc = spawn(...args);
		proc.stdout.pipe(process.stdout);	// 子进程中的日志通过管道传输至主进程
		proc.stderr.pipe(process.stderr);	// 子进程中的错误捕获通过管道输出至主进程
		proc.on(‘close‘, () => {	// 关闭子进程
			resolve();	// promise 状态切换至执行完成状态
		})
	})
}

module.exports = async name => {
    clear();
    const data = await figlet(‘Gisuni Welcome‘);
    colorLog(data,‘red‘);
	colorLog(`创建项目：${name}`);
	await clone(‘github:用户名/项目名称‘, name);	// 如果项目克隆地址为：https://github.com/ShanYi-Hui/react-template.git，则此处应改造为：github:ShanYi-Hui/react-template
	colorLog(‘安装依赖中···‘);
	await spawn(process.platform === ‘win32‘?‘npm.cmd‘:‘npm‘, [‘install‘], { cwd:`./${name}` });	// 安装依赖
	colorLog(`
安装完成！

项目将自动启动，若未启动请执行如下命令:
==============================
	cd ${name}
	npm run serve
==============================
	`);
+	open(‘http://localhost:8080‘);		// 打开指定端口
+	await spawn(process.platform === ‘win32‘?‘npm.cmd‘:‘npm‘, [‘run‘,‘serve‘], { cwd:`./${name}` });  // 启动项目
}

其实到这里，一个最基本的 cli 已经制作完成了~~~
那么接下来将开始丰富它的功能！

更新中···

以上是关于手写cli的主要内容，如果未能解决你的问题，请参考以下文章

手写cli

手写数字识别——基于全连接层和MNIST数据集

前端面试题之手写promise

如何使用 CLI 测试我自己的手写数字或 MNIST 数据集中的数据之一

vue-cli手写tabs选项卡

vue-cli手写弹窗组件