当我们使用前端脚手架工具,比如在命令行中输入 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 来运行此文件
[name]
定义的是可选参数,而 <name>
定义的是必填参数,传参的形式有多种,如图所示。