个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章利用node.js开发cli的完整步骤由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

CLI介绍

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

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

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

创建项目

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

?
1
mkdir moka-cli

进入目录，初始化项目 。

?
1
2
cd moka-cli
npm init -y

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

?
1
2
3
4
|-- moka-cli
  |-- package.json
  |-- bin
   |-- index.js

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

?
1
npm install commander inquirer chalk --save

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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来执行这个文件.

?
1
#!/usr/bin/env node

再添加下面代码 。

?
1
2
3
#!/usr/bin/env node
 
console.log( 'moka-cli run!' )

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

?
1
npm install -g

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

?
1
2
$ moka
moka-cli run!

第三方库介绍

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

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

commander 。

文档地址 。

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

?
1
moka create vue vue-demo

inquirer 。

文档地址 。

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

?
1
2
$ moka create vue moka-demo
? Template named moka-demo is already existed, are you sure to overwrite? (Y/n)

chalk 。

文档地址 。

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

核心功能

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|-- 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文件 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#!/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文件 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
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 。

?
1
npm install -g

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

?
1
moka create react react-demo

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

?
1
2
$ moka create react react-demo
react template has been created successfully!

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

?
1
2
3
4
$ 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内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://juejin.cn/post/6910886628265295885 。

最后此篇关于利用node.js开发cli的完整步骤的文章就讲到这里了,如果你想了解更多关于利用node.js开发cli的完整步骤的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 英雄联盟手游怎么删好友 英雄联盟手游删除好友怎么加回来
文章推荐： ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
文章推荐： Linux下源码包安装Swoole及基本使用操作图文详解
文章推荐： 36个正则表达式(开发效率提高80%)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com