CLI-命令行工具

一、基本概念

二、执行机制

三、简单实现

基本概念

CLI 是什么

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

Shell CLI：这是最常见的 CLI 类型。它从键盘获取命令并使用该命令与操作系统交互。例如，Unix/Linux 操作系统的 Bash 和 Windows 操作系统的 Powershell/命令提示符。
开发 CLI：软件开发框架和工具通常带有自己的 CLI，需要安装在您的计算机系统上。这些 CLI 专门设计用于为开发人员提供特定于框架的命令，使其可以轻松地编译代码、运行测试、管理依赖项以及执行各种与开发相关的任务。示例包括NPM、GIT等。
数据库 CLI：此 CLI 提供特定命令，允许用户执行 SQL 查询、执行数据操作操作以及控制数据库结构。一些示例包括MySQL CLI、SQLite CLI 和MongoDB CLI。
终端仿真器 CLI：此 CLI 使用户能够通过网络连接连接到远程计算机或服务器。它模拟终端界面，显示命令提示符并允许用户在远程计算机上执行命令。PuTTY和OpenSSH等 SSH 客户端就是其中的一些示例。

为什么需要 CLI

CLI-命令行工具的功能特性主要包括以下几点

任务自动化： CLI 可以自动执行任务。CLI 允许您键入命令来帮助您自动执行任务，从而腾出时间来专注于其他重要任务，从而提高效率和生产力，而不是通过单击鼠标并专注于单个活动来执行重复性任务。
快速响应时间： CLI 快速执行任务和命令。与 GUI 不同，当用户已经熟悉命令时，它需要的时间更少。
资源更少：在资源有限的情况下，使用 CLI 可以很方便，可以帮助您执行任务，而无需依赖其他资源来导航或单击图标、按钮和菜单来完成工作。
专业感：使用 CLI 会给您一种专业感，因为开发人员、系统管理员和程序员等专业人士都是使用 CLI 的人。

常见 CLI 前端工具

全局安装：vue-cli、create-react-app
独立安装：webpack、eslint、typescript
无需安装：vite

执行机制

npm run 执行流程

npm scripts 执行步骤

安装

npm install eslint -D

配置

{
  "scripts": {
    "eslint:fix": "eslint . --fix"
  }
}

使用

npm run eslint:fix

npm run 执行流程

流程图

全局执行

在终端中输入任意指令后，系统查找处理流程为：当前目录下 -> 环境变量目录下

Windows

Mac OS

当node安装完成后，npm全局目录./bin会被自动设置成环境变量。

npm create

使用 vue-cli

# 安装
npm i -g @vue/cli

# 使用
vue create vue-app

使用 vite

npm create vite vite-app --template vue

注意：npm create 是 npm init 的别名。

npm init 官方定义

npm init <initializer> 可用于设置新的或现有的 npm 包。

在这种情况下，initializer 是一个名为 create-<initializer> 的 npm 包，它将由 npx 安装，然后执行其主 bin —— 大概是创建或更新 package.json 并运行任何其他与初始化相关的操作。

init命令转化为对应的npx操作如下：

npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create

任何附加选项都将直接传递给命令，因此 npm init foo --hello 将映射到 npx create-foo --hello。

代码实现

CLI Package 基础

思考：node_modules/.bin 下的可执行文件怎么生成的？

vue-cli package.json

{
  "name": "@vue/cli",
  "version": "5.0.8",
  "description": "Command line interface for rapid Vue.js development",
  "bin": {
    "vue": "bin/vue.js"
  },
  "types": "types/index.d.ts",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vuejs/vue-cli.git",
    "directory": "packages/@vue/cli"
  },
  "keywords": [
    "vue",
    "cli"
  ],
  // ...
}

package.json 中 bin 定义：

许多包都有一个或多个可执行文件，他们希望将它们安装到 PATH 中。要使用它，可在 package.json 中提供一个 bin 字段，它是命令名称到本地文件名的映射。当全局安装此包时，该文件将链接到全局 bin 所在的位置，因此可以按名称运行。

以 myapp 为例：

{
  "name": "myapp",
  "bin": {
    "myapp": "./cli.js"
  }
}

当执行 npm install myapp 后，即可在 node_modules/.bin 目录下生成名为 myapp 的可执行文件。
当执行 npm install -g myapp 全局安装后，myapp 将在npm全局bin目录下生成。

CLI Package 基础

思考：js文件可以直接执行吗？怎样让js变成可执行？

可执行文件标识符

#!/usr/bin/env node

#!：在Linux或者Unix中叫做 Shebang（也称为Hashbang）。通常在Unix系统的基本中第一行开头中出现，用于指明这个脚本文件的解释程序。
/usr/bin/env：指定执行环境的全局安装目录。
node: 代表使用的执行器类型为node。

CLI 开发工具库 - commander

commander 可以用来描述你的命令行界面，并负责将参数解析为选项和命令参数。

$ vue
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

CLI 开发工具库 - commander

const { program } = require('commander')

// 配置命令行工具名称、版本号、基础用法
program
  .name('demo')
  .version(`@cli/demo ${require('./package').version}`)
  .usage('<command> [options]')

// 定义一个 create 命令
program
  .command('create <app-name>')
  .description('create a new project')
  .action((name) => {
    console.log(`TODO: create project ${name}`)
  })

// 解析命令行参数入口
program.parse(process.argv)

$ pnpm demo create my-project

TODO: create project my-app

CLI 开发工具库 - inquirer

vue-cli 初始化项目的询问选项

const inquirer = require('inquirer')

// 在 add 命令内部（详见packages/demo/index.js）
inquirer.prompt([
  {
    type: 'list',
    name: 'name',
    message: '请选择需要添加的插件',
    choices: ['pluginA', 'pluginB', 'pluginC']
  },
  {
    type: 'input',
    name: 'directory',
    message: '请输入添加的目标目录路径'
  },
  // more...
]).then(answer => {
  console.log('prompts answer:', answer)
})

$ pnpm demo add

? 请选择需要添加的插件 (Use arrow keys)
> pluginA
  pluginB
  pluginC

CLI 开发工具库 - chalk

const chalk = require('chalk')

// Combine styled and normal strings
console.log(chalk.blue('Hello') + ' World' + chalk.red('!'));

// Compose multiple styles using the chainable API
console.log(chalk.blue.bgRed.bold('Hello world!'));

// Pass in multiple arguments
console.log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));

// Nest styles
console.log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));

// Nest styles of the same type even (color, underline, background)
console.log(chalk.green(
  'I am a green line ' +
  chalk.blue.underline.bold('with a blue substring') +
  ' that becomes green again!'
));

Thank You

GitHub