用oclif,码得更快了,30秒创建脚手架

399次阅读  |  发布于2年以前

背景

前端很多 cli 工具,比如著名的 vue-cli,这些工具大多数都是作用于快速创建对应框架的模版代码,让开发者可以不用从0开始配置项目,可以专注于项目本身的业务逻辑开发,从而快速创建项目。

那么,该如何做一个 cli 工具呢,我之前写过一篇文章介绍 [提高生产力--让项目配置变为自己专属的脚手架] ,大家可以回顾一下~

然而,这样的步骤走下来,虽然形成了一个 cli 工具,但是创建 cli 项目本身的过程,还是挺繁琐的。后来我发现有个 oclif框架,就是相当于是创建命令行工具项目的模版代码的一个脚手架,非常好用,给大家推荐一下。下面详细说一下使用过程。

cli 类型

oclif 有2种 cli 类型,单个命令模式和多个命令模式。单个 cli 命令,例如 lscat,它可以接收参数和标志符,单个命令的 cli 可以是一个单文件。它的文件目录结构为:

package.json
src/
└── index.ts

多个 cli 命令,例如 git,它还有子命令,而它的子命令本身就是单个的 cli 。它在 package.json 有个 oclif.commands 的字段,指向一个包含所有命令的目录。

package.json
  "oclif": {
    "commands": "./lib/commands",
  }

src/
└── commands/
    ├── create.ts
    └── destroy.ts

简言之,就是创建的命令行项目可以是单个命令的或多个命令的。

使用

// 建议全局安装
npm i oclif -g

执行npx oclif multi testMul,创建一个多命令的项目:

得到项目后,执行对应的脚本命令,初始化时得到的是 hello 命令,因此执行 ./bin/run hello:

这样,就跑起来啦。其中的run方法就是对应脚本的入口,你的脚本逻辑就可以直接在run方法中调用了。

调试

  1. 全局使用 当你想在其他项目中测试脚本时,可以使用npm link,然后就可以直接用 cli 的名字要执行对应的脚本啦,例如本例中的 testMul hello
  2. 静态属性 我们看下,默认的 hello 模版:
import {Command, flags} from '@oclif/command'

export default class Hello extends Command {
  static description = 'describe the command here'

  static examples = [
    `$ testMul hello
hello world from ./src/hello.ts!
`,
  ]

  static flags = {
    help: flags.help({char: 'h'}),
    // flag with a value (-n, --name=VALUE)
    name: flags.string({char: 'n', description: 'name to print'}),
    // flag with no value (-f, --force)
    force: flags.boolean({char: 'f'}),
  }

  static args = [{name: 'file'}]

  async run() {
    this.log('---run 方法就是执行入口---')
    const {args, flags} = this.parse(Hello)
    const name = flags.name ?? 'world'
    this.log(`hello ${name} from ./src/commands/hello.ts`)
    if (args.file && flags.force) {
      this.log(`you input --force and --file: ${args.file}`)
    }
  }
}

其中,有静态属性description,examples,flags,args,解释一下其中的含义:

oclif 框架功能特性

常用命令

  1. oclif single <NAME>:在当前目录中创建一个单命令项目
  2. oclif multi <NAME>:在当前目录中创建一个多命令项目
  3. oclif command <NAME>:添加一条命令
  4. oclif hook <NAME> --event=<hook>:新建一个钩子
  5. oclif plugin <pluginName>:新建一个插件

参考文档

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8