前言
在前端開(kāi)發(fā)中，擁有一套高效蛉鹿、簡(jiǎn)潔、適合自己的前端項(xiàng)目構(gòu)建工具是非常有必要的往湿。畢竟市面上不是所有的工具都能滿足自己復(fù)雜工作的需要妖异。此外也希望可以將此技術(shù)服務(wù)于其他的伙伴們。
本文分為幾個(gè)章節(jié)领追，本章節(jié)講述cli基礎(chǔ)功能他膳，從初始化項(xiàng)目到clone遠(yuǎn)端模板的流程。敬請(qǐng)期待其他章節(jié)
搭建CLI準(zhǔn)備
每一次成功绒窑，我們都是站在巨人的肩膀上棕孙。
-
首先簡(jiǎn)單介紹幾個(gè)常用的依賴的包
commander：命令行接口的完整解決方案，設(shè)置一些node命令些膨，如help蟀俊、usage、version订雾、parse輸入的參數(shù)肢预。
download-git-repo：git代碼下載庫(kù)，存到本地洼哎。
chalk: node終端樣式庫(kù)烫映，可以修改console的輸出顏色沼本。
inquirer: 用戶與命令行之間的交互問(wèn)答工具。
ora：終端旋轉(zhuǎn)器锭沟，loading小圈圈擅威。
rimraf：刪除文件。
初始化項(xiàng)目
- 創(chuàng)建項(xiàng)目文件夾冈钦，執(zhí)行以下命令郊丛，創(chuàng)建項(xiàng)目package.json。
$ npm init
初始化結(jié)果
{
"name": "cli",
"version": "1.0.0",
"description": "0基礎(chǔ)教你開(kāi)發(fā)自己的CLI",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"cli"
],
"author": "猿話",
"license": "ISC"
}
編輯項(xiàng)目
- 修改package.json文件瞧筛，添加bin中的CLI將是我們執(zhí)行的命令厉熟，和依賴庫(kù)。
{
"name": "cli",
"version": "1.0.0",
"description": "0基礎(chǔ)教你開(kāi)發(fā)自己的CLI",
"main": "main.js",
"bin": {
"CLI": "./bin/cli"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"inquirer": "^4.0.0",
"ora": "^1.3.0",
"rimraf": "^2.6.2",
"chalk": "^2.3.0",
"commander": "^2.11.0",
"download-git-repo": "^1.0.1"
},
"keywords": [
"cli"
],
"author": "猿話",
"license": "ISC"
}
- 新增bin/cli目錄文件较幌，編寫(xiě)bin/cli文件揍瑟。
首先我們先編寫(xiě)一個(gè)輸出cli版本號(hào)的命令
#!/usr/bin/env node
//第一行其中#!/usr/bin/env node表示用node解析器執(zhí)行本文件。
const program = require('commander')
const pkg = require('../package')
const chalk = require('chalk')
const download = require('download-git-repo');
const ora = require('ora');
const spinner = ora('Loading undead unicorns');
/**
* version
*/
program
.version(chalk.green(`${pkg.version}`))
/**
* init 項(xiàng)目
*/
program
.command('init <app-name>')
.description('generate a project from a remote template (legacy API, requires ./wk-init)')
.option('-c, --clone', 'Use git clone when fetching remote template')
.action((template, appName, cmd) => {
spinner.start('開(kāi)始下載');
download('direct:https://github.com/study-demo/cli-demo.git', appName, { clone: true }, err => {
if (err) {
spinner.fail(chalk.green('下載失敗 \n' + err));
process.exit();
}
spinner.succeed(chalk.green(`下載成功`));
});
})
program.parse(process.argv)
到此一個(gè)簡(jiǎn)單的cli就搭建完成乍炉。
本地調(diào)試
- 本地安裝
npm install -g
OR
npm link // 添加軟連接
- 調(diào)試
// 查看版本號(hào)
CLI -V
OR
node bin/cli -V
// 初始化項(xiàng)目
CLI init <app-name>
OR
node bin/cli init <app-name>
發(fā)布到npm
npm login
npm publish
詳細(xì)信息參考：《一分鐘教你發(fā)布npm包》
