为了账号安全,请及时绑定邮箱和手机立即绑定

Node 101 之 commander:前端命令行工具必选利器

标签:
前端工具

当我们使用前端脚手架工具,比如在命令行中输入 vue init webpack project-name,就会进入安装流程。这个命令是怎么定义的?背后是怎么运行起来的?

无论是 vue-cli,还是 create-react-app,都是用 node 写的,而打造命令行工具,一定会用到 commander。commander 的核心功能是解析命令行参数,并提供了一系列简便的 api。
图片描述

上面展示了 commander 的基本功能。不过我们希望实现 vue init 这样的命令,那么如何实现自定义命令呢?需要做三件事情:

1、创建一个 node 包( npm init ),然后定义 package.json 中的 bin 字段:

"bin": {
    "hello": "./cli.js"
}

我们通过上述方式定义了 hello 命令,不过这时还不能直接在命令行中运行此命令,我们需要为它创建关联到全局环境的软连接(symlink)
2、有两种方式皆创建 symlink,在项目根目录下运行:
sudo npm linksudo npm install . -g
3、在 cli.js 第一行添加 #!/usr/bin/env node,如果不加,系统就不知道要用 node 来运行此文件
图片描述目前我们有了一个 hello 命令,但功能十分单薄,​如何在 hello 之下定义更多的命令(sub command)以及相应的操作呢?我们可以用 command 和 action。
图片描述上图中 [name] 定义的是可选参数,而 <name> 定义的是必填参数,传参的形式有多种,如图所示。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7
获赞与收藏
16

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消