利用node.js开发cli的完整步骤


Posted in Javascript onDecember 29, 2020

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下的项目模板,我会在文章里补充项目地址。

到此这篇关于利用node.js开发cli的文章就介绍到这了,更多相关node.js开发cli内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 #Javascript
vue中配置scss全局变量的步骤
Dec 28 #Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 #Vue.js
Vue仿百度搜索功能
Dec 28 #Vue.js
node.js通过Sequelize 连接MySQL的方法
Dec 28 #Javascript
解决elementui表格操作列自适应列宽
Dec 28 #Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 #Javascript
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
php URL验证正则表达式
2011/07/19 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python做接口测试的必要性
2019/11/20 Python
如何用python处理excel表格
2020/06/09 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
电子银行营销方案
2014/02/22 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
办公室日常管理制度
2015/08/04 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
解决xampp安装后Apache无法启动
2022/03/21 Servers
Python实现双向链表
2022/05/25 Python