基于node的cli工具開發(fā)使用詳解
前言
如果文章對你有幫助的話,記得一鍵三連喲。有問題和疑惑的話也可以在評論區(qū)留言。我會第一時間回復大家,如果覺得我的文章哪里有知識點錯誤的話,也懇請能夠告知,把錯的東西理解成對的,無論在什么行業(yè),都是致命的。
背景
公司內部有維護admin和h5兩套基礎模版,但是每次新項目需要打開gitlab找git地址 clone,稍微有點麻煩,所以集成一個工具,方便使用??????。
功能特性
下載公司內部前端模版
效果預覽

地址
插件開發(fā)
推薦使用nrm管理npm源
- 創(chuàng)建用戶
npm adduser --registry http://127.0.0.1:4873/
- 發(fā)布
npm publish --registry http://127.0.0.1:4873/
使用
- 安裝
npm install web-cli -g --registry http://127.0.0.1:4873/
- 使用
web-cli create
實現(xiàn)原理
使用到的工具
- chalk: 修改終端顏色
- commander: 添加版本命令提示
- inquirer: 命令行交互
- minimis: 命令行解析
- ora: 終端旋轉器
- shelljs: 執(zhí)行shell命令
- 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" //會注冊成全局可執(zhí)行文件
},
"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
// 第一行不可少,其作用是它告訴系統(tǒng)這個腳本需要用node解釋器來執(zhí)行。
// 這個文件主要是用來處理接受參數(shù)的入口文件,
const Service = require('../service') //引入我們的入口文件
const service = new Service() //實例化Service
const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv) //解析命令行參數(shù)
const command = args._[0]
// 執(zhí)行初始化
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' }) //執(zhí)行相應的命令
}
}
// 設置默認命令
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`
// 執(zhí)行clone
await shelljs.exec(url)
// 重命名
await fs.renameSync(`./${type}`, `./${name}`)
// 刪除無關文件
await rimraf(`./${name}/.git`)
await rimraf(`./${name}/.idea`)
await rimraf(`./${name}/.vscode`)
log.succeed('創(chuàng)建成功')
log.info(`cd ${name}`)
log.info(`pnpm install`)
}以上就是基于node的cli工具開發(fā)使用詳解的詳細內容,更多關于node cli開發(fā)工具的資料請關注腳本之家其它相關文章!
相關文章
Node.JS利用PhantomJs抓取網(wǎng)頁入門教程
現(xiàn)今,網(wǎng)頁抓取已經是一種人所共知的技術了,然而依然存在著諸多復雜性,下面這篇文章主要給大家介紹了Node.JS利用PhantomJs抓取網(wǎng)頁的方法教程,需要的朋友可以參考借鑒,下面來一起看看吧。2017-05-05
解決koa2 ctx.render is not a function報錯問題
這篇文章主要介紹了解決koa2 ctx.render is not a function報錯問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Visual?Studio?Code中npm腳本找不到圖文解決辦法
這篇文章主要給大家介紹了關于Visual?Studio?Code中npm腳本找不到的圖文解決辦法,做前端開發(fā)如果項目達到了一定的規(guī)模就離不開npm了,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-07-07

