构建一个 CLI 工具

前言

CLI（command-line interface 命令行界面）是指在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）。

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

　　•允许用户从NPM服务器下载别人编写的第三方包到本地使用。

　　•允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

　　•允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

前置准备

1. 开发环境

Node 环境（必须）
VS Code 开发工具（非必须，你可以使用你喜欢的开发工具）

1.1 安装 Node

请安装 Node（>v6.5），这还是很简单的，访问 Node 官网下载推荐版本，当前应该是 8.11.1。

之后的安装全是下一步就可以了。

1.2 安装 VS Code

同样访问 Visual Studio Code 官网，下载安装即可。

2. 注册 NPM 账号

访问 NPM 官网，点击 Sign up 字样，输入邮箱用户名密码就可以完成创建了，注意这里的 Username 和 Password 将用于后续登录和发布包。Public Email 用于接收推送邮件。

详细操作

　　1. 创建 NPM 项目

　　1.1 新建一个空文件夹

　　运行命令行，切换到你想存放文件的目录，执行新建文件。如：

C:> cd D:/

D:> mkdir jr-web

D:> cd jr-web

D:\jr-web>

1.2 新建一个 NPM 项目

在刚刚的目录下执行 npm init，其中注释为我添加的说明。

D:\jrweb> npm init

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 json` 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: (jr-web) jr-web

程序会停在这里，让你输入项目名称，这个名称也是后面要上传到云上的包名，所以不允许和现有包名类似或者重名，所以你们可以像我这样在后面加上自己的名字，这是一个学习 demo，所以不需要太纠结于命名，后续你们开发自己的工具时，再认真想一个名字就好。

1	`version: (1.0.0)`

这里需要输入程序的初始版本号，默认值直接回车就可以了。

展开源码

1	`description: 这里写的是简介，jr-web，编写一个简单的 CLI 工具`

这里写上简介.

1	`entry point: (index.js)`

这里是程序的主入口文件，我们先选默认值，后续这些值都是可以修改的。用于发布插件，我们这里是编写一个工具，会使用到的是 bin，详见下文。

git repository:

包存放的 git 地址，默认为空。

1 2	`keywords: 名字、web、前端` `author: lee`

输入关键词和作者。

1	`license: (ISC) MIT`

添加开源许可证，MIT，指可随意使用和修改.

About to write to D:\gitchat-oni\package.json:

{

"name": "gitchat-oni",

"version": "1.0.0",

"description": "这里写的是简介,jr-web,编写一个简单的CLI工具",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [

"名字",

"web",

"前端"

],

"author": "xiaohuoni",

"license": "MIT"

}

Is this ok? (yes) yes

这里确认创建，一个 NPM 项目就创建成功了。

2. 配置程序入口

我们使用 vscode，打开 d:/jr-web，当前的目录结构是：

1	`├── package.json`

因为本次教程是为了给我们演示，如何构建一个工具，而不是插件，所以我们打开 package.json 做一点点的修改。

5 - "main": "index.js",

5 + "bin": {

6 + "onitest": "./bin/jr-web"

7 + },

前面数字表示行数，+ 表示增减，- 表示删除。这里的 onitest，是我们实际使用工具的时候执行的命令。

小结：如果是插件的话，入口文件就是 main 所定义的；如果是工具的话，入口文件就是 bin 所定义的。

未完待续......

参考文件：

NPM 使用介绍 | 菜鸟教程

20分钟掌握前端编写 CLI 工具_codebay118的博客-CSDN博客