美文网首页前端养成
day03: 手写一个简单的CLI

day03: 手写一个简单的CLI

作者: 云海成长 | 来源:发表于2021-06-07 17:45 被阅读0次

初步认识

我们在快速创建vue项目时,使用命令vue create hello-world,在此之前先全局安装npm install -g @vue/cli。安装了@vue/cli 才可以使用命令vue create, 那么,这个cli到底是什么?

CLI一般指命令行界面。命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。

简单来说,我们输入命令,然后计算机帮我们执行一系列固定的操作,而这些操作,是我们先前定义好的。以上面的创建vue项目的例子来说,我们执行vue create hello-world, 计算机就会创建vue项目的模板,而这些早在@vue/cli里定义好了。

那接下来的重点当然要说说cli如何定义了?

  1. 创建一个js文件self-cli.js(任意命名), 如果希望某个文件是作为命令被执行的,那么只要在这个文件的开头写上: #!/usr/bin/env node, 这个文件什么都不做,只是打印一个“启动啦”
#!/usr/bin/env node
console.log('启动啦')
  1. 在package.json里面配置
 "bin": {
        "yh": "bin/self-cli.js"
    },

看下我的文件目录:


目录
  1. 在项目根目录下执行npm link链接到全局
  2. 测试,执行yh ,结果如下
    image.png

一个do nothing 的cli就被开发出来了,如果要创建有用的cli,可以借助commander

升级

修改self-cli.js如下

#!/usr/bin/env node
const program = require('commander') //命令行工具
const chalk = require('chalk') // 让命令界面colorful
program
    .command('init <name>') // 定义init命令
    .description('init project')
    .action((name) => {
        console.log(chalk.green(`初始化${name}`))
    })
program.parse(process.argv) // 同志们,这一行一定要加!!!!!

program 说明
command 创建命令,后面可跟参数
description 描述
action 执行回调,即这个命令要做些什么
参考:https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md

测试


image.png

如果action的逻辑很复杂,可以将它抽离成一个文件,一般将这些文件放在lib文件夹下。

好了,今天的分享就到这里了,高考生们加油!!!

相关文章

  • day03: 手写一个简单的CLI

    初步认识 我们在快速创建vue项目时,使用命令vue create hello-world,在此之前先全局安装np...

  • 初学Vue——使用Vue完成一个简单的todolist

    看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋)。 一、使用vue-cli脚手架快速搭建...

  • webpack学习笔记(2)

    webpack的使用方式 自己手写配置 webpack配置 第三方脚手架 Vue-Cli Angular-Cli ...

  • 手写时光Day03

    《此时众生》是十月和女儿一起去书店的时候,女儿挑的。文字用周记的方式,结合了二十四节气,从夏天小满节气开始写起。四...

  • 09回文数

    2019年04月17日 Day03 级别:简单 LeetCode 09 题目: 回文数 判断一个整数是否是回...

  • 简单的依赖注入(控制反转)实现

    手写一个简单的依赖注入:

  • 手写promise

    手写promise 带大家手写一个 promis。在手写之前我会先简单介绍一下为什么要使用promise、prom...

  • vue_cli

    作者:台湾小凡 1. vue-cli 简介 简单介绍 vue-cli 官网 [vuejs/vue-cli: Sim...

  • 13罗马数转整数

    2019年04月19日 Day03 级别:简单 LeetCode 13 题目: 罗马数字转整数 罗马数字包含...

  • TensorFlow 2.x - MNIST 图像分类(1)

    一、手写数字识别 手写数字识别是一个入门级的简单项目,相当于 HelloWorld,简单十来行代码就能搞定,但是其...

网友评论

    本文标题:day03: 手写一个简单的CLI

    本文链接:https://www.haomeiwen.com/subject/ajfdsltx.html