一、CLI有啥用，認識CLI

前端開發過程中常見的CLI有：

• create-react-app

• vue-cli

• webpack-cli

• prettier-cli

基本復雜一點的工具都在集成CLI，為啥都要搞成CLI呢？

因為CLI可以提供更強大的功能:

• 通過命令搭配實現不同的功能

• 管理項目模版

• 啟動本地服務

• 生成模版文件

• 對代碼進行格式化

二、搭建一個最簡單的CLI

我們先搭建一個最簡單的CLI來體驗下，然后逐步實現復雜點的功能。

1、新建項目

首先新建項目作為CLI源代碼地址

mkdir cli-demo cd cli-demo npm init 復制代碼

2、安裝依賴

yargs文檔配置：該插件將用戶通過終端輸入的參數解析成對象，可以配置各種參數。

yarn add yargs 復制代碼

命令使用語法：

.command(cmd, desc, [builder], [handler]) 復制代碼

3、CLI命令配置

下面的配置說明：

• 配置命令get

• 聲明信息make a get HTTP request

• 并配置了參數url信息

• 最后callback函數獲取用戶執行的參數

具體使用：編輯index.js，第一行一定要加注釋，表明運行在node環境下

#!/usr/bin/env node const yargs = require('yargs/yargs') const { hideBin } = require('yargs/helpers') yargs(hideBin(process.argv))   .command(     'get',     'make a get HTTP request',     function (yargs) {       return yargs.options({         url: {             alias: 'u',             describe: 'the URL to make an HTTP request to'         }       })     },     function (argv) {       console.log("callback", argv.url)     }   )   .help()   .argv 復制代碼

執行命令，可以獲取輸入的參數

這里get就是定義的指令，url是指令下的key值，用--url輸入，alias就是別名，用-u表示，后面跟要輸入的參數。

3、npm發布

接著我們發布下npm，然后一個CLI就完成了。

登陸npm倉庫，沒有的話去注冊一個,地址

npm login 復制代碼

選擇一個中意的cli名字，查一下是否存在，這里我們起個名字cli-demo3

執行npm version patch && npm publish --registry=https://registry.npmjs.org，不出意外的話，就發布成功了。

4、下載使用

然后我們本地使用下，首先下載到本地，全局下載npm install -g cli-demo3

cli-demo3是我們前期測試使用寫的CLI，后面繼續使用我正常部署的CLI：u-amin-cli，原理是一樣的

三、終端交互優化

1、log-symbols：輸出結果用圖標標識

# 這里使用4版本，升級到5版本不再支持require方式導入 yarn add log-symbols@4.1.0 復制代碼

使用方法

使用效果

2、chalk：打印出各種顏色的文案提示，功能強大，幾乎支持所有的顏色

# 這里使用4版本，升級到5版本不再支持require方式導入 yarn add chalk@4.1.2 復制代碼

1、支持傳入string，array和模版字符串

使用方法

console.log(chalk.blue("this is blue")) console.log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz')); console.log(` CPU: ${chalk.red('90%')} RAM: ${chalk.green('40%')} DISK: ${chalk.yellow('70%')} `); 復制代碼

使用效果

2、支持修改背景色、各種顏色格式、指定不同文本的顏色

使用方法

console.log(chalk.blue.bgRed.bold('Hello world!')); console.log(chalk.red('Hello',  chalk.underline.yellowBright('world') + '!')); console.log(chalk.hex('#DEADED').underline('Hello, world!')) console.log(chalk.rgb(15, 100, 204).inverse('Hello!')) 復制代碼

使用效果

3、支持自行封裝一些顏色

使用方法

const error = chalk.bold.red; const warning = chalk.hex('#FFA500'); // Orange color console.log(error('Error!')); console.log(warning('Warning!')); 復制代碼

使用效果

3、ora：增加loading效果

# 這里使用5版本，升級到6版本不再支持require方式導入 yarn add ora@5.4.1 復制代碼

使用方法

const ora = require('ora');   const spinner = ora('Loading unicorns').start();   setTimeout(() => {     spinner.color = 'yellow';     spinner.text = 'Loading rainbows'; }, 1000); 復制代碼

使用效果

4、inquirer：在終端選擇命令

使用方法

var inquirer = require('inquirer'); inquirer   .prompt([     {       name: "templateType",       type: "list",       default: "vue",       choices: [         {           name: "React",           value: "react",         },       ],       message: "Select the template type.",     }   ])   .then((answers) => {     // Use user feedback for... whatever!!   })   .catch((error) => {     if (error.isTtyError) {       // Prompt couldn't be rendered in the current environment     } else {       // Something else went wrong     } }); 復制代碼

使用效果

這樣就可以給客戶提示選擇來處理邏輯。

5、download-git-repo：download Git倉庫

使用方法

const download = require("download-git-repo"); download('direct:https://gitlab.com/flippidippi/download-git-repo-fixture.git#my-branch', 'test/tmp', { clone: true }, function (err) {   console.log(err ? 'Error' : 'Success') }) 復制代碼

還有很多類似的插件，來豐富cli的功能，根據需要添加即可

• open 打開瀏覽器

• yargs/commander 執行cli命令

• get-port 獲取當前端口號

四、CLI優化

1、提取命令行配置到一個文件中

啟動文件index.js

const yargs = require('yargs/yargs') const { hideBin } = require('yargs/helpers') const config = require('./config') const yargsCommand = yargs(hideBin(process.argv)) config.forEach(commandConfig => {   const { command, descriptions, options, callback } = commandConfig   yargsCommand.command(     command,     descriptions,     yargs => yargs.options(options),     (argv, ...rest) => {       callback(argv, ...rest);     }   ) })    yargsCommand.help().argv 復制代碼

指令文件config.js

const commandOptions = [   {     command: "create",     descriptions: "拉取一個項目模版",     options: {       name: {         alias: "n",         type: "string",         require: true,         describe: "項目名稱",       },     },     callback: async (argv) => {       create({name: argv.name})     } }] 復制代碼

提取配置，就很清晰了

2、配置ESLint和Prettier，之前專門寫了自動化檢查代碼的文章。

前端工程化：Prettier+ESLint+lint-staged+commitlint+Hooks+CI 自動化配置處理

3、提取腳本生成使用文檔

上一步我們對配置進行了提取，接著根據配置生成使用文檔，如下

使用方法

yarn add json2md@1.12.0 -D 復制代碼

const json2md = require("json2md") // 按json2md需要的數據格式組合 const data = json2md([     { h1: "JSON To Markdown" }   , { blockquote: "A JSON to Markdown converter." } ])) // 寫入Readme.md文檔 fs.writeFile(path.join(__dirname, "../Readme.md"), json2md(data), (err) => {   if (err) throw err;   console.log("update docs success"); }); 復制代碼

五、CLI管理模版項目

1、配置下載命令

{     command: "create",     descriptions: "拉取一個項目模版",     options: {       name: {         alias: "n",         type: "string",         require: true,         describe: "項目名稱",       },     },     callback: async (argv) => {       create({name: argv.name})     } } 復制代碼

2、準備模版文件列表

const map = {    vue: "https://github.com/luchx/ECHI_VUE_CLI3.0.git",    react: "git@github.com:richLpf/antd-template-demo.git#main" } 復制代碼

3、下載邏輯

1、inquirer提示用戶選擇對應的模版，具體可以看前面用法

2、通過download下載模版文件

module.exports = function downloadFromRemote(url, name) {   return new Promise((resolve, reject) => {     download(`direct:${url}`, name, { clone: true }, function (err) {       if (err) {         reject(err);         return;       }       resolve();     });   }); }; 復制代碼

3、通過ora在下載過程中展示loading

這是主要的下載邏輯，關于日志，我們可以更好的展示，也可以配置更復雜的命令：替換下載的項目名稱，刪除.git目錄，修改package.json配置

六、通過CLI啟動API模擬接口服務

前端在開發的過程中，總會遇到后端接口無法按時提供的情況，這種情況下有很多解決方案，常見的通過客戶端生成模擬api，在項目中引入Mock。

這里我們通過CLI來實現一個更加簡單好用的模擬方案

1、方案原理

通過CLI啟動一個或多個服務器，通過Express做路由轉發本地的JSON文件

2、命令配置

首先我們配置mock命令，設定參數type、port、create分別代表API類型、啟動Http服務器端口號，默認9000，create是否自動生成接口數據JSON文件。

{     command: "mock",     descriptions: "啟動一個本地服務，模擬返回接口數據",     options: {       type: {         alias: "t",         type: "string",         default: "action",         describe: "選擇API類型",         choices: ['action', 'restful']       },       port: {         alias: "P",         type: "number",         default: 9000,         describe: "選擇啟動的端口號",       },       create: {         alias: "c",         type: "boolean",         default: false,         describe: "如果mock目錄不存在是否自動創建，默認不自動創建"       },     },     callback: async (argv) => {       mock({         ...argv       })     } 復制代碼

3、Http服務處理

1、啟動express服務器，配置參數解析和跨域設置，并獲取mock數據的目錄，啟動Http服務器

const app = express() app.use(bodyParser.json({limit: '50mb'})) app.use(express.urlencoded({ extended: true })); app.all('*', (req, res, next) => {     res.header('Access-Control-Allow-Origin', '*'); //訪問控制允許來源：所有     res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); //訪問控制允許報頭 X-Requested-With: xhr請求     res.header('Access-Control-Allow-Metheds', 'PUT, POST, GET, DELETE, OPTIONS'); //訪問控制允許方法     res.header('X-Powered-By', 'nodejs'); //自定義頭信息，表示服務端用nodejs     res.header('Content-Type', 'application/json;charset=utf-8');     next(); }); const filePath = path.join(process.cwd(), `./mock/`) app.listen(port, () => console.log(`Mock api listening on port ${port}!`)); 復制代碼

2、如果是Action類型的API

比如請求url為：

http://localhost:9000/acl 復制代碼

請求體為：

{     Action: "GetUsers" } 復制代碼

此時在CLI執行的目錄，新建mock/acl/GetUsers.json

GetUsers.json內容為返回的json數據

{     "RetCode": 0,     "Message": "this is error",     "Data": [] } 復制代碼

然后通過fs模塊讀取json文件的數據，直接返回模擬的數據，因為是實時讀取的，所以更新json數據不需要重啟服務。主要邏輯如下

app.post('*', async(req, res) => {     const key = req.params[0].substring(1)     const { Action } = req.body     const file = `${filePath}${key}/${Action}.json`;     fs.readFile(file, 'utf-8', function(err, data) {         if (err) {             res.send(NotFoundResponse);         } else {             res.send(data);         }     }) }) 復制代碼

3、如果是Restful類型的API

比如請求url為：

http://localhost:9000/acl/users 復制代碼

post請求體為：

{     limit: 10 } 復制代碼

此時在CLI執行的目錄，新建mock/acl/users/post.json

post.json內容為返回的json數據

{     "RetCode": 0,     "Message": "get users",     "Data": [] } 復制代碼

如果是get請求，只需要添加get.json就可以了。

然后同樣通過fs讀取對應的json數據

app.all("*", async(req, res) => {     const key = req.params[0]     const method = req.method     const file =`${filePath}${key}/${method}.json`     console.log("file", file)     fs.readFile(file, 'utf-8', function(err, data) {         if (err) {             res.send(NotFoundResponse);         } else {             res.send(data);         }     }) }) 復制代碼

這樣就完成了CLI啟動一個模擬的http服務，用起來很方便，并且可以支持直接在項目中使用。

具體可以試試看u-admin-cli

對于大部分mock來說，復雜的配置是不需要的，這里僅僅是用了固定的json數據，我覺得就夠用了，當然還可以自行處理數據，引入Mock規則，自行定義生成數據類型等

以上就是搭建一個CLI的過程，我們從最簡單的開始構建了一個基礎CLI，在這個基礎上進行了交互優化，然后實際開發了CLI的兩個功能：

• 1、通過CLI管理部門內的模版項目

• 2、通過CLI啟動Http服務器，模擬接口生成

項目代碼：github.com/richLpf/u-a…

CLI地址：www.npmjs.com/package/u-a…

碼字不易，歡迎點贊????，有問題請留言。

作者：前端中后臺
鏈接：https://juejin.cn/post/7090001607596703758
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。