在做 iOS 期间,做了一个 CLI 工具替代一些列繁琐的工作,当时使用了 Python 实现。直到今天,我发现使用 Node 实现 CLI 工具是非常不错的选择,非常高效,很多现成的库,打造一个体验一流的 CLI 工具非常简单。通过本文来学习一下如何实现一个 CLI 工具。
本文没有实现 CLI 工具的具体功能,主要目的是希望你能够根据自己的需求创建一个 CLI 工具。
1、创建项目
创建一个项目,起名为 suyan-cli,在 shell 中输入:
mkdir suyan-cli cd suyan-cli npm init -y然后输入 code . 通过 VSCode 打开这个项目进行编辑。
安装依赖,这个工具主要用到了下面几个第三方库:
1》chalk,让你的 CLI 工具五颜六色;
2》figlet,让你的 CLI 显示一个漂亮的 logo;
3》commander,解析命令参数;
4》clear,清空控制台;
5》inquirer,交互式输入;
执行 npm install chalk figlet commander clear inquirer 安装这些库。
此时整个文件目录结果如下,lib 中主要放代码的具体实现逻辑代码,inquirer 主要是为了演示用户输入:
2、修改 package.json
主要添加一个 bin 属性,设置 suyan-cli 的执行文件为 index.js,这时如果在根目录下执行 npm install -g,这时既可以使用 suyan-cli 了。
{ "name": "suyan-cli", "version": "1.0.0", "description": "创建一个 CLI 工具,来源于公众号素燕", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "Suyan", "CLI" ], "bin": { "suyan-cli": "./index.js" }, "author": "公众号素燕", "license": "ISC", "dependencies": { "chalk": "^4.1.0", "clear": "^0.1.0", "commander": "^6.0.0", "figlet": "^1.5.0", "inquirer": "^7.3.3" } }3、index.js 具体实现
首先我们要显示一个漂亮的 logo,使用 figlet 和 chalk 这两个库来实现,具体代码如下:
console.log(chalk.yellow(figlet.textSync('Suyan', { horizontalLayout: 'full' })));commander 主要用来解析命令行参数,具体使用看代码注释:
const program = new Command(); // 版本 program .version(packageJson.version) .usage('<commnad [options]>'); // 可选参数 program .option('-d, --debug', 'crate a app project'); // create 命令 program .command('create <app-name>') .description('crate a new project') .option('-f, --force', 'Overwrite target directory if it exists') .action(appname => { // 输入的 appname }) // 触发 --help 后打印一些信息 program.on('--help', () => { console.log(); console.log(` create by ${chalk.cyan('公众号素燕')} 关注获取更多有趣的前端知识`); console.log(` more click ${chalk.red('https://github.com/lefex/FE')}`) console.log(); }); program.commands.forEach(c => c.on('--help', () => console.log())); // 开始解析参数 program.parse(process.argv); // 无任何命令时输出帮助信息 if (!process.argv.slice(2).length) { program.outputHelp(); }4、发布 package 到 npm
到此 suyan-cli 这个工具就完成了,我们需要把这个工具发布到 npm 上,供其它同学使用。
发布之前需要注册一个账号,点击下面这个链接进行注册:
https://www.npmjs.com/
注册完后,回到根目录执行 npm login,输入用户名、密码和邮箱:
➜ suyan-cli npm login Username: suyan_scyd Password: Email: (this IS public) suyan_scyd@163.com Logged in as suyan_scyd on https://registry.npmjs.org/.执行 npm publish,此时如果出现 403 错误,需要登录你的邮箱进行确认。
npm ERR! code E403 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/suyan-cli - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy.登录邮箱,验证完后再执行 npm publish,如果成功的话,显示如下:
➜ suyan-cli npm publish npm notice npm notice ???? suyan-cli@1.0.0 npm notice === Tarball Contents === npm notice 327B lib/file.js npm notice 1.7kB index.js npm notice 646B lib/inquirer.js npm notice 633B package.json npm notice === Tarball Details === npm notice name: suyan-cli npm notice version: 1.0.0 npm notice package size: 1.6 kB npm notice unpacked size: 3.3 kB npm notice shasum: 8b5cf500747ff03af5595cc46d3a2afb023f288d npm notice integrity: sha512-eC85jsdBE4mJk[...]RPQHA0jzh8gJA== npm notice total files: 4 npm notice + suyan-cli@1.0.0你可以在这里看到我发布的 suyan-cli 工具:
https://www.npmjs.com/settings/suyan_scyd/packages
5、安装使用
这时,所有的小伙伴都可以使用这个工具了,我特意换了一台电脑执行
npm install suyan-cli -g
安装完成后,输入:suyan-cli --help
到此一个完整的 CLI 工具就算完成了。代码地址:
https://github.com/lefex/FE/tree/master/webpack/vue-webpack
大家加油!