如何使用node.js开发cli

CLI介绍

命令行界面(英语: command-line interface
,缩写:CLI),是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。

目前前端开发中,CLI是常用的工具。前端三大框架 Vue
React
Angular
都有对应的CLI,包括现在最流行的前端工程化的打包工具 Webpack
,也有对应的 webpack-cli

在现代的前端开发中,CLI提高了开发的效率。让相应的前端开发者免去了大量的重复性操作,节省了大量的时间。CLI可以完成的功能,包括但不限于 初始化生成对应的项目模板
执行特定的脚本文件
在项目中创建新的模块
。下面来介绍一下前端工程师如何使用node.js来完成一个CLI。

创建项目

打开终端,创建moka-cli的目录

mkdir moka-cli
复制代码

进入目录,初始化项目

cd moka-cli
npm init -y
复制代码

根目录下新建bin目录,并新建index.js文件,此时目录结构如下

|-- moka-cli
|-- package.json
|-- bin
|-- index.js
复制代码

开发cli需要借助 commander
inquirer
chalk
三个库

npm install commander inquirer chalk --save
复制代码

修改package.json文件,使用es moudle,并新增moka命令

package.json
{
"name": "moka-cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
+ "type": "module",
+ "bin": {
+    "moka": "./bin/index.js"
+  },
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"chalk": "^4.1.0",
"commander": "^6.2.1",
"inquirer": "^7.3.3"
}
}
复制代码

接下来需要在/bin/index.js中编程,在第一行添加如下代码,这行代码是告诉系统要用node来执行这个文件。

#!/usr/bin/env node
复制代码

再添加下面代码

#!/usr/bin/env node
console.log('moka-cli run!')
复制代码

然后在项目根目录下全局安装项目

npm install -g
复制代码

到这里,一个简单的CLI就完成了,可以打开终端,在任意目录下输入 moka
,控制台就会打印出对应的消息。

$ moka
moka-cli run!
复制代码

第三方库介绍

moka-cli希望实现可以创建前端开发模板的功能,可以使用moka命令来创建一个vue或react项目。

先来介绍一下使用到到第三方的库

commander

文档地址

用来实现命令的库,在moka-cli中会用来实现 create
命令,实现用下面的命令行来创建一个vue-demo的项目

moka create vue vue-demo
复制代码

inquirer

文档地址

实现用户和终端交互的库,在moka-cli中使用 create
指令的时候会询问是否覆盖已有项目

$ moka create vue moka-demo
? Template named moka-demo is already existed, are you sure to overwrite? (Y/n)
复制代码

chalk

文档地址

可以在终端界面显示出多种颜色的文本和背景

核心功能

在根目录创建actions和templates目录,目录结构如下

|-- moka-cli
|-- package-lock.json
|-- package.json
+    |-- actions
+   |   |-- create.js
|-- bin
|   |-- index.js
+    |-- templates
+        |-- react
+        |   |-- app.js
+        |   |-- index.js
+        |   |-- src
+        |       |-- index.js
+        |-- vue
+            |-- app.js
+            |-- index.js
+            |-- src
+                |-- index.js
复制代码

templats下面用来存放通过CLI要生成的项目的模板,在这里先随便创建几个文件展示一下。

修改/bin/index.js文件

#!/usr/bin/env node
import create from '../actions/create.js';
import commander from 'commander';
const { program } = commander;
program.version('0.0.1');
program
.command('create <template> [name]')
.description('新建项目')
.action(create);
program.parse(process.argv);
复制代码

修改./actions/create.js文件

import fs from 'fs';
import path from 'path';
import chalk from 'chalk';
import inquirer from 'inquirer';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const TEMPLATES = ['vue', 'react'];
const targetPath = process.cwd();
function createTemplate(template, name) {
const templatePath = path.join(__dirname, '../', `templates/${template}`);
function readAndCopyFile(parentPath, tempPath) {
let files = fs.readdirSync(parentPath);
files.forEach((file) => {
let curPath = `${parentPath}/${file}`;
let stat = fs.statSync(curPath);
let filePath = `${targetPath}/${tempPath}/${file}`;
if (stat.isDirectory()) {
fs.mkdirSync(filePath);
readAndCopyFile(`${parentPath}/${file}`, `${tempPath}/${file}`);
} else {
const contents = fs.readFileSync(curPath, 'utf8');
fs.writeFileSync(filePath, contents, 'utf8');
}
});
}
readAndCopyFile(templatePath, name);
}
function deleteTemplate(path) {
if (fs.existsSync(path)) {
fs.readdirSync(path).forEach(function (file, index) {
var curPath = path + '/' + file;
if (fs.lstatSync(curPath).isDirectory()) {
// recurse
deleteTemplate(curPath);
} else {
// delete file
fs.unlinkSync(curPath);
}
});
fs.rmdirSync(path);
}
}
export default function create(template, name) {
if (!TEMPLATES.includes(template)) {
console.log(chalk.red(`No ${template} Template`));
return;
}
const projectPath = path.resolve(targetPath, name);
if (fs.existsSync(projectPath)) {
inquirer
.prompt([
{
name: 'template-overwrite',
type: 'confirm',
message: `Template named ${name} is already existed, are you sure to overwrite?`,
validate: function (input) {
if (input.lowerCase !== 'y' && input.lowerCase !== 'n') {
return 'Please input y/n !';
} else {
return true;
}
},
},
])
.then((answers) => {
// 如果确定覆盖
if (answers['template-overwrite']) {
// 删除文件夹
deleteTemplate(projectPath);
console.log(chalk.yellow(`Template already existed , removing!`));
//创建新模块文件夹
fs.mkdirSync(projectPath);
createTemplate(template, name);
console.log(
chalk.green(`${template} template has been created successfully!`)
);
}
})
.catch((err) => {
console.log(chalk.red(err));
});
} else {
fs.mkdirSync(projectPath);
createTemplate(template, name);
console.log(
chalk.green(`${template} template has been created successfully!`)
);
}
}
复制代码

最后在项目根目录运行以下命令,重新安装一下moka-cli

npm install -g
复制代码

随便找一个路径,运行 moka create <template> [name]
命令来生成项目

moka create react react-demo
复制代码

效果如下,会在该目录下生成一个react-demo的文件夹,里面存放的就是moka-cli项目中/templates/react下的所有

$ moka create react react-demo
react template has been created successfully!
复制代码

如果在该目录下继续创建一个同名的项目,就会提示是否覆盖,输入 y
后继续执行

$ moka create react react-demo
? Template named react-demo is already existed, are you sure to overwrite? Yes
Template already existed , removing!
react template has been created successfully!
复制代码

create
命令的核心逻辑是通过node的 fs
模块来复制 /templates
下的文件,然后将其放到指定的路径下,具体实现直接看代码就可以来。

总结

CLI是提示前端开发效率的重要工具,如果有长期维护的项目,开发一个CLI来完成一些重复性的工作,是一个不错的选择。

moka-cli还没有上传github,等过段时间完善一些 /templates
下的项目模板,我会在文章里补充项目地址。

稀土掘金
我还没有学会写个人说明!
上一篇

这「顶流」不该糊成这样

下一篇

oracle 19c dataguard aws ORA-03186报错

你也可能喜欢

评论已经被关闭。

插入图片