当我们使用前端脚手架工具,比如在命令行中输入 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 link
或 sudo npm install . -g
,
3、在 cli.js 第一行添加 #!/usr/bin/env node
,如果不加,系统就不知道要用 node 来运行此文件
目前我们有了一个 hello 命令,但功能十分单薄,如何在 hello 之下定义更多的命令(sub command)以及相应的操作呢?我们可以用 command 和 action。
上图中 [name]
定义的是可选参数,而 <name>
定义的是必填参数,传参的形式有多种,如图所示。
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦