关于javascript:基于node的cli工具开发

前言

如果文章对你有帮忙的话，记得一键三连哟。有问题和纳闷的话也能够在评论区留言。我会第一工夫回复大家，如果感觉我的文章哪里有知识点谬误的话，也恳请可能告知，把错的货色了解成对的，无论在什么行业，都是致命的。

背景

公司外部有保护 admin 和h5两套根底模版，然而每次新我的项目须要关上 gitlab 找git地址 clone，略微有点麻烦，所以集成一个工具，方便使用🤪🤪🤪。

性能个性

下载公司外部前端模版

成果预览

地址

taosiqi/web-cli

插件开发

举荐应用 nrm 治理 npm 源

1. 创立用户

npm adduser --registry http://127.0.0.1:4873/

2. 公布

npm publish --registry http://127.0.0.1:4873/

应用

1. 装置

npm install web-cli -g --registry http://127.0.0.1:4873/

2. 应用

web-cli create

实现原理

应用到的工具

1. chalk: 批改终端色彩
2. commander: 增加版本命令提醒
3. inquirer: 命令行交互
4. minimis: 命令行解析
5. ora: 终端旋转器
6. shelljs: 执行 shell 命令
7. rimraf：删除文件夹

package.json

{
  "name": "web-cli",
  "version": "0.0.5",
  "description": "前端脚手架",
  "main": "dist/src/service.js",
  "author": {
    "name": "taosiqi",
    "email":"thinlf97@gmail.com"
  },
  "keywords": [
    "rs",
    "cli"
  ],
  "bin": {"web-cli": "dist/src/bin/web-cli.js" // 会注册成全局可执行文件},
  "scripts": {
    "dev": "tsc -w -p .",
    "build": "rimraf dist && tsc -p .",
    "test": "echo"Error: no test specified"&& exit 1",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  },
}

web-cli.ts

#!/usr/bin/env node
// 第一行不可少，其作用是它通知零碎这个脚本须要用 node 解释器来执行。// 这个文件次要是用来解决承受参数的入口文件，const Service = require('../service') // 引入咱们的入口文件
const service = new Service() // 实例化 Service

const rawArgv = process.argv.slice(2)

const args = require('minimist')(rawArgv) // 解析命令行参数

const command = args._[0]
// 执行初始化
service.run(command, args, rawArgv)

service.ts

import program from 'commander'
import packageInfo from '../package.json'
import {create} from "./commands/create";

module.exports = class Service {constructor() {setupDefaultCommands() // 设置默认命令
    }
    run(_id, _args = {}, rawArgv = []) {program.parse(rawArgv, { from: 'user'})  // 执行相应的命令
    }
}

// 设置默认命令
const setupDefaultCommands = () => {program.version(packageInfo.version, '-v, --version', '输入以后版本号')
    program.helpOption('-h, --help', '获取帮忙')
    program.command('create').description('新建我的项目').alias('c').action(async () => {await create()
    })
    program.addHelpCommand(false)
}

create.ts

import shelljs from 'shelljs'
import inquirer from 'inquirer'
import * as fs from 'fs'
import rimraf from 'rimraf'
import log from '../utils/log'
const templateType = {
    type: 'list',
    message: '请抉择模版类型',
    name: 'type',
    choices: [
        {
            name: 'h5',
            value: 'vue3-h5-starter'
        },
        {
            name: 'admin',
            value: 'vue3-admin-starter'
        }
    ]
}
const templateName = [
    {
        type: 'input',
        message: '请输出项目名称:',
        name: 'name',
        validate: (val) => {return val !== ''}
    }
]
export const create = async () => {
    // 抉择模版类型
    let {type} = await inquirer.prompt([templateType])
    // 项目名称
    let {name} = await inquirer.prompt(templateName)
    // 拼接 git 地址, 自行替换「」字段
    const url = `git clone http://gitlab-ci-token:「token」@「ip/ 域名」/pinxin/${type}.git --depth 1`
    // 执行 clone
    await shelljs.exec(url)
    // 重命名
    await fs.renameSync(`./${type}`, `./${name}`)
    // 删除无关文件
    await rimraf(`./${name}/.git`)
    await rimraf(`./${name}/.idea`)
    await rimraf(`./${name}/.vscode`)
  
    log.succeed('创立胜利')
    log.info(`cd ${name}`)
    log.info(`pnpm install`)
}

援用

首发于掘金，欢送关注