基于node的cli工具开发使用详解

前言

如果文章对你有帮助的话,记得一键三连哟。有问题和疑惑的话也可以在评论区留言。我会第一时间回复大家,如果觉得我的文章哪里有知识点错误的话,也恳请能够告知,把错的东西理解成对的,无论在什么行业,都是致命的。

背景

公司内部有维护adminh5两套基础模版,但是每次新项目需要打开gitlabgit地址 clone,稍微有点麻烦,所以集成一个工具,方便使用。

功能特性

下载公司内部前端模版

效果预览

-1

地址

taosiqi/web-cli

插件开发

推荐使用nrm管理npm

  • 创建用户
  1. npm adduser registry http://127.0.0.1:4873/
  • 发布
  1. npm publish registry http://127.0.0.1:4873/

使用

  • 安装
  1. npm install webcli registry http://127.0.0.1:4873/
  • 使用
  1. webcli create

实现原理

使用到的工具

  • chalk: 修改终端颜色
  • commander: 添加版本命令提示
  • inquirer: 命令行交互
  • minimis: 命令行解析
  • ora: 终端旋转器
  • shelljs: 执行shell命令
  • rimraf:删除文件夹

package.json

  1. {
  2.      “name”: “web-cli”,
  3.      “version”: “0.0.5”,
  4.      “description”: “前端脚手架”,
  5.      “main”: “dist/src/service.js”,
  6.      “author”: {
  7.      “name”: “taosiqi”,
  8.      “email”:“thinlf97@gmail.com”
  9.      },
  10.      “keywords”: [
  11.      “rs”,
  12.      “cli”
  13.      ],
  14.      “bin”: {
  15.      “web-cli”: “dist/src/bin/web-cli.js” //会注册成全局可执行文件
  16.      },
  17.      “scripts”: {
  18.      “dev”: “tsc -w -p .”,
  19.      “build”: “rimraf dist && tsc -p .”,
  20.      “test”: “echo “Error: no test specified” && exit 1″,
  21.      “changelog”: “conventional-changelog -p angular -i CHANGELOG.md -s”
  22.      },
  23. }

web-cli.ts

  1. #!/usr/bin/env node
  2. // 第一行不可少,其作用是它告诉系统这个脚本需要用node解释器来执行。
  3. // 这个文件主要是用来处理接受参数的入口文件,
  4. const Service = require(‘../service’) //引入我们的入口文件
  5. const service = new Service() //实例化Service
  6. const rawArgv = process.argv.slice(2)
  7. const args = require(‘minimist’)(rawArgv) //解析命令行参数
  8. const command = args._[0]
  9. // 执行初始化
  10. service.run(command, args, rawArgv)

service.ts

  1. import program from ‘commander’
  2. import packageInfo from ‘../package.json’
  3. import { create } from “./commands/create”;
  4. module.exports = class Service {
  5.      constructor() {
  6.          setupDefaultCommands() //设置默认命令
  7.      }
  8.      run(_id, _args = {}, rawArgv = []) {
  9.          program.parse(rawArgv, { from: ‘user’ }) //执行相应的命令
  10.      }
  11. }
  12. // 设置默认命令
  13. const setupDefaultCommands = () => {
  14.      program.version(packageInfo.version, ‘-v, –version’, ‘输出当前版本号’)
  15.      program.helpOption(‘-h, –help’, ‘获取帮助’)
  16.      program.command(‘create’).description(‘新建项目’).alias(‘c’).action(async () => {
  17.          await create()
  18.      })
  19.      program.addHelpCommand(false)
  20. }

create.ts

  1. import shelljs from ‘shelljs’
  2. import inquirer from ‘inquirer’
  3. import * as fs from ‘fs’
  4. import rimraf from ‘rimraf’
  5. import log from ‘../utils/log’
  6. const templateType = {
  7.      type: ‘list’,
  8.      message: ‘请选择模版类型’,
  9.      name: ‘type’,
  10.      choices: [
  11.          {
  12.              name: ‘h5’,
  13.              value: vue3-h5-starter’
  14.          },
  15.          {
  16.              name: ‘admin’,
  17.              value: ‘vue3-admin-starter’
  18.          }
  19.      ]
  20. }
  21. const templateName = [
  22.      {
  23.          type: ‘input’,
  24.          message: ‘请输入项目名称:’,
  25.          name: ‘name’,
  26.          validate: (val) => {
  27.              return val !== 
  28.          }
  29.      }
  30. ]
  31. export const create = async () => {
  32.      // 选择模版类型
  33.      let { type } = await inquirer.prompt([templateType])
  34.      // 项目名称
  35.      let { name } = await inquirer.prompt(templateName)
  36.      // 拼接git地址,自行替换「」字段
  37.      const url = `git clone http://gitlab-ci-token:「token」@「ip/域名」/pinxin/${type}.git –depth 1`
  38.      // 执行clone
  39.      await shelljs.exec(url)
  40.      // 重命名
  41.      await fs.renameSync(`./${type}`, `./${name}`)
  42.      // 删除无关文件
  43.      await rimraf(`./${name}/.git`)
  44.      await rimraf(`./${name}/.idea`)
  45.      await rimraf(`./${name}/.vscode`)
  46.      log.succeed(‘创建成功’)
  47.      log.info(`cd ${name}`)
  48.      log.info(`pnpm install`)
  49. }

以上就是基于node的cli工具开发使用详解的详细内容,更多关于node cli开发工具的资料请关注我们其它相关文章!

标签

发表评论