手写cli
通过命令行工具，初始化团队项目，并生成团队规范代码，一键创建项目，一键生成代码，一键生成功能模块···
解放双手，从 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 已经制作完成了~~~
那么接下来将开始丰富它的功能！
更新中···