借助Heroku的Oclif框架做为开发人员,咱们常常会用到CLI工具。从git到cloud shells,咱们到处都在使用这些工具。因此,是时候开发一个本身的了。在此过程当中,咱们将使用Heroku的强大的oclif框架。前端
Oclif是什么?
它是一个快速构建CLI工具的开放框架,由著名的Heroku提供。git
要建什么?
咱们将建立一个待办事项指令,它有四个操做:github
一、添加新任
二、查看全部任务
三、更新任务
四、删除一个任务shell
初始化项目
Oclif能够生成两种类型的项目
一、具备一个命令的项目。
二、可能有多个命令(包括嵌套命令)的项目 。数据库
在本文中,咱们须要一个多命令项目,因此让咱们生成它:npm
npx oclif multi todocli
运行此项指令并按照说明操做,将在当前目录中初始化一个名为todocli的新项目。json
如今,让咱们进入目录并运行帮助:bash
cd todocli && ./bin/run --help
这将给出以下结果:并发
> USAGE
$ todocli [COMMAND]
COMMANDS
hello
help display help for todocli
复制代码
可用的指令及其文档将会被展现。框架
项目安排
在src目录中,咱们能够找到一个名为commands的目录。这个目录包含全部指令及其相对文件名。打个比方,若是咱们有一个hello指令,那么这个目录中有一个名为hello.js的文件,而且该指令将在无需任何设置的状况下运行。让咱们删除hello.js,由于咱们不须要它了。
设置数据库
为了存储咱们的任务,咱们须要一个存储系统。为了简单起见,咱们将使用lowdb,这是一个很是简单的json文件存储系统。
而后咱们来安装它吧:
npm install lowdb --save
让咱们在项目根目录中建立一个db.json的文件。这个文件将保存咱们的数据。而后咱们须要安装lowdb。如今,咱们将在src目录中建立一个名为db.js的文件。这个文件将保存数据库的内容。
在此,咱们只是先加载所需的库和文件,而后将一个空的todos阵列定义为基本集合(若是是SQL数据库的话,那么它就是一个表格)。
添加任务
Oclif为咱们提供了流畅的指令生成功能。让咱们运行如下代码:
oclif command add
这将在src/commands目录中建立一个名为add.js的文件。让咱们用下面的代码替换该文件的内容:
该文件有几个关键组件:
一个运行函数,执行此命令的主要功能的,
一项描述,这是指令的文件分类,
还有标志,它描述传递给指令的标志。
这里,咱们有一个名为task的标志,它具备string类型。咱们能够运行这个命令
./bin/run add --task="welcome task"
该指令将向数据库添加一个任务,并登载该操做的响应。
显示任务
在show.js中,咱们以升序显示全部任务。咱们在chalkjs中添加了一些颜色,以便更好地查看命令结果。
更新任务
为了简单起见,咱们如今只是将更新部分的任务设置为done。咱们只须要将任务的id当成flag。
./bin/run update --id=1
这会在这个任务里设置done = true以及id = 1。
删除任务
删除很是简单:咱们将id做为标志传递,而后从数据库中删除相关任务。
快好了
就像这样,咱们作了一个很是简单的todocli。如今,若是咱们想像其余标准的CLI工具同样使用它,或者让咱们的朋友使用它,咱们须要使它成为一个npm包。咱们要把它发布在npm上。
完成开发并发布到npm
首先,咱们要有一个npm账户。而后,咱们须要登陆运行指令。
npm login
而后在项目目录下运行
npm run prepack
这将打包该项目,并使其具有从描述和标志生成的自述文件并准备好发布。
如今,在npm上发布:
npm publish
若是一切顺利,那么该模块已成功发布在npm上。若是不能成功,请检查项目名称和版本。
咱们能够开始使用它,像任何其余npm工具同样并支持全球安装:
npm install -g todocli
任何人均可以随时随地使用这些指令😃
> todocli add --task="Great task!!!"
> todocli show
> todocli update --id=1
> todocli remove --id=1
复制代码
若是您来到这里已经看完了整篇文章,恭喜😃你真棒! 如今,你能够作一个小任务.
任务
分配任务的id是不正确,你能够修改吗?在回答部分告诉我你是怎么解的。
oclif : oclif.io
lowdb: github.com/typicode/lo…
chalk: github.com/chalk/chalk
todocli: www.npmjs.com/package/tod…
今天的分享就到这里,但愿本文能帮助到您!
点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
关注公众号「新前端社区」,享受文章首发体验!
每周重点攻克一个前端技术难点。