为什么要搭建cli

在前端开发中,在搭建好一套自己满意的代码架子后,希望以后可以在别的开发中也一直沿用。之前或许把这份代码的结构再手动码一份,但这样的重复劳动其实搭建好自己的cli后,就可以通过几个命令来完成了

搭建cli准备

首先新建自己cli项目完成初始化配置之后。然后完成以下步骤

npm init

在package.json中新建bin对象,如下图


image.png

这个对象中存放着之后需要执行的命令。

  • 新建bin目录,添加执行的js文件,注意这里的js文件需要以#!/usr/bin/env node这个开头,表明用node执行
  • 安装搭建cli的包
    "dependencies": {
     "inquirer": "^4.0.0",
     "ora": "^1.3.0",
     "rimraf": "^2.6.2",
     "chalk": "^2.3.0",
     "commander": "^2.11.0",
     "download-git-repo": "^1.0.1"
    }
    
  • 简单介绍下面几个包的作用
    commander:设置一些node命令,如包的help、usage、version、parse输入的参数,
    download-git-repo:下载git上的模板,并存到本地,
    chalk:可以修改输出console颜色,
    inquirer:用户判断,是否执行
    ora:下载包时,产生loading的图标
    rimraf:删除文件

    编写cli代码

    创建目录文件chrys.js


    image.png

    定义版本号,及子命令和一些说明简介

    创建子命令文件 chrys-init.js

     

    1 .
    image.png

    定义用法,及转化参数。

    2 .


    image.png
    描述帮助。
    3 .
    image.png

    获取参数及存放位置。
    4 .
    image.png

    下载模板到对应文件夹

    到此一个简单的cli就搭建完成,那么我们如何使用它呢

    使用

    1 .本地调试或使用

    node bin/chrys.js template-name project-name
    

    ,或者

     npm install -g
    
    chrys init template-name project-name
    

    2 .发布到npm
    首先需要注册npm账号,然后执行如下命令

    npm login 
    npm publish
    

    每次发布版本号要更新,其次就是包的名字要唯一,假如被人使用只能换个名字了。
    github地址:https://github.com/Chryseis/chryseis-cli



    作者:ChrysAwesome
    链接:https://www.jianshu.com/p/9d7efa19ffe9
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    posted on   ygunoil  阅读(1352)  评论(0编辑  收藏  举报
    编辑推荐:
    · AI与.NET技术实操系列:基于图像分类模型对图像进行分类
    · go语言实现终端里的倒计时
    · 如何编写易于单元测试的代码
    · 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
    · .NET Core 中如何实现缓存的预热?
    阅读排行:
    · 25岁的心里话
    · 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
    · 零经验选手,Compose 一天开发一款小游戏!
    · 通过 API 将Deepseek响应流式内容输出到前端
    · AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗
    < 2025年3月 >
    23 24 25 26 27 28 1
    2 3 4 5 6 7 8
    9 10 11 12 13 14 15
    16 17 18 19 20 21 22
    23 24 25 26 27 28 29
    30 31 1 2 3 4 5
    点击右上角即可分享
    微信分享提示