手寫個(gè)簡(jiǎn)單cli工具
在做 iOS 期間，做了一個(gè) CLI 工具替代一些列繁瑣的工作，當(dāng)時(shí)使用了 Python 實(shí)現(xiàn)。直到今天，我發(fā)現(xiàn)使用 Node 實(shí)現(xiàn) CLI 工具是非常不錯(cuò)的選擇，非常高效，很多現(xiàn)成的庫(kù)，打造一個(gè)體驗(yàn)一流的 CLI 工具非常簡(jiǎn)單。通過(guò)本文來(lái)學(xué)習(xí)一下如何實(shí)現(xiàn)一個(gè) CLI ?工具。
本文沒(méi)有實(shí)現(xiàn) CLI 工具的具體功能，主要目的是希望你能夠根據(jù)自己的需求創(chuàng)建一個(gè) CLI 工具。
1、創(chuàng)建項(xiàng)目
創(chuàng)建一個(gè)項(xiàng)目，起名為 suyan-cli，在 shell 中輸入：
mkdir suyan-clicd suyan-clinpm init -y
然后輸入?code .?通過(guò) VSCode 打開(kāi)這個(gè)項(xiàng)目進(jìn)行編輯。
安裝依賴，這個(gè)工具主要用到了下面幾個(gè)第三方庫(kù)：
1》chalk，讓你的 CLI 工具五顏六色；
2》figlet，讓你的 CLI 顯示一個(gè)漂亮的 logo；
3》commander，解析命令參數(shù)；
4》clear，清空控制臺(tái)；
5》inquirer，交互式輸入；
執(zhí)行?npm install?chalk?figlet?commander?clear?inquirer?安裝這些庫(kù)。
此時(shí)整個(gè)文件目錄結(jié)果如下，lib 中主要放代碼的具體實(shí)現(xiàn)邏輯代碼，inquirer 主要是為了演示用戶輸入：
2、修改?package.json?
主要添加一個(gè) bin 屬性，設(shè)置 suyan-cli?的執(zhí)行文件為 index.js，這時(shí)如果在根目錄下執(zhí)行?npm install -g，這時(shí)既可以使用 suyan-cli 了。
{"name": "suyan-cli","version": "1.0.0","description": "創(chuàng)建一個(gè) CLI 工具，來(lái)源于公眾號(hào)素燕","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["Suyan","CLI"],"bin": {"suyan-cli": "./index.js"},"author": "公眾號(hào)素燕","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 具體實(shí)現(xiàn)
首先我們要顯示一個(gè)漂亮的 logo，使用 figlet 和 chalk 這兩個(gè)庫(kù)來(lái)實(shí)現(xiàn)，具體代碼如下：
console.log(chalk.yellow(figlet.textSync('Suyan', {horizontalLayout: 'full'})));
commander 主要用來(lái)解析命令行參數(shù)，具體使用看代碼注釋：
const program = new Command();// 版本program.version(packageJson.version).usage('' );// 可選參數(shù)program.option('-d, --debug', 'crate a app project');// create 命令program.command('create' ).description('crate a new project').option('-f, --force', 'Overwrite target directory if it exists').action(appname => {// 輸入的 appname})// 觸發(fā) --help 后打印一些信息program.on('--help', () => {console.log();console.log(` create by ${chalk.cyan('公眾號(hào)素燕')} 關(guān)注獲取更多有趣的前端知識(shí)`);console.log(` more click ${chalk.red('https://github.com/lefex/FE')}`)console.log();});program.commands.forEach(c => c.on('--help', () => console.log()));// 開(kāi)始解析參數(shù)program.parse(process.argv);// 無(wú)任何命令時(shí)輸出幫助信息if (!process.argv.slice(2).length) {program.outputHelp();}
4、發(fā)布 package 到 npm
到此 suyan-cli 這個(gè)工具就完成了，我們需要把這個(gè)工具發(fā)布到 npm 上，供其它同學(xué)使用。
發(fā)布之前需要注冊(cè)一個(gè)賬號(hào)，點(diǎn)擊下面這個(gè)鏈接進(jìn)行注冊(cè)：
https://www.npmjs.com/
注冊(cè)完后，回到根目錄執(zhí)行 npm login，輸入用戶名、密碼和郵箱：
? suyan-cli npm loginUsername: suyan_scydPassword:Email: (this IS public) suyan_scyd@163.comLogged in as suyan_scyd on https://registry.npmjs.org/.
執(zhí)行 npm publish，此時(shí)如果出現(xiàn) 403 錯(cuò)誤，需要登錄你的郵箱進(jìn)行確認(rèn)。
npm ERR! code E403npm 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-editnpm ERR! 403 In most cases, you or one of your dependencies are requestingnpm ERR! 403 a package version that is forbidden by your security policy.
suyan-cli npm publishnpm noticenpm notice ? [email protected]npm notice === Tarball Contents ===npm notice 327B lib/file.jsnpm notice 1.7kB index.jsnpm notice 646B lib/inquirer.jsnpm notice 633B package.jsonnpm notice === Tarball Details ===npm notice name: suyan-clinpm notice version: 1.0.0npm notice package size: 1.6 kBnpm notice unpacked size: 3.3 kBnpm notice shasum: 8b5cf500747ff03af5595cc46d3a2afb023f288dnpm notice integrity: sha512-eC85jsdBE4mJk[...]RPQHA0jzh8gJA==npm notice total files: 4npm notice[email protected]
你可以在這里看到我發(fā)布的 suyan-cli 工具：
https://www.npmjs.com/settings/suyan_scyd/packages
5、安裝使用
這時(shí)，所有的小伙伴都可以使用這個(gè)工具了，我特意換了一臺(tái)電腦執(zhí)行
npm install suyan-cli?-g
安裝完成后，輸入：suyan-cli --help
到此一個(gè)完整的 CLI 工具就算完成了。代碼地址：
https://github.com/lefex/FE/tree/master/webpack/vue-webpack
大家加油！