前言
在前端開發(fā)中喻括，擁有一套高效楞泼、簡(jiǎn)潔、適合自己的前端項(xiàng)目構(gòu)建工具是非常有必要的庶诡。畢竟市面上不是所有的工具都能滿足自己復(fù)雜工作的需要惦银。此外也希望可以將此技術(shù)服務(wù)于其他的伙伴們。
搭建CLI準(zhǔn)備
每一次成功，我們都是站在巨人的肩膀上扯俱。
首先簡(jiǎn)單介紹幾個(gè)常用的依賴的包
- commander：命令行接口的完整解決方案书蚪，設(shè)置一些node命令，如help迅栅、usage殊校、version、parse輸入的參數(shù)读存。
- download-git-repo：git代碼下載庫(kù)箩艺，存到本地。
- chalk: node終端樣式庫(kù)宪萄，可以修改console的輸出顏色艺谆。
- inquirer: 用戶與命令行之間的交互問答工具。
- ora：終端旋轉(zhuǎn)器拜英，loading小圈圈静汤。
- rimraf：刪除文件。
初始化項(xiàng)目
創(chuàng)建項(xiàng)目文件夾居凶，執(zhí)行以下命令虫给，創(chuàng)建項(xiàng)目package.json。
npm init
初始化結(jié)果
{
"name": "vadm",
"version": "0.0.1",
"description": "vue-admin cli tools",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"vue-admin",
"vadm"
],
"author": "rushuinet",
"license": "ISC"
}
編輯項(xiàng)目
修改package.json文件侠碧，添加bin中的CLI將是我們執(zhí)行的命令抹估，和依賴庫(kù)。
{
"name":"vadm",
"version":"0.0.1",
"description":"vue-admin cli tools",
"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":"rushuinet",
"license":"ISC"
}
新增bin/vadm目錄文件弄兜，編寫bin/vadm文件药蜻。
#!/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((appName, opts, cmd) => {
spinner.start("開始下載");
download(
"direct:https://github.com/vue-admin/vue-admin.git#main",
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)
vadm -V
OR
node bin/vadm -V
// 初始化項(xiàng)目
vadm init <app-name>
OR
node bin/vadm init <app-name>
發(fā)布到npm
npm login
npm publish
踩坑點(diǎn)
1.required ora和chalk錯(cuò)誤問題: Error [ERR_REQUIRE_ESM]: require() of ES Module
高版本不支持require,目前改為以下版本解決：
"ora":"^5.1.0",
"chalk":"^4.1.2",
2.Error: 'git clone' failed with status 128
解決：地址要保證使用的是https模式语泽，地址加前綴，例如：
direct:https://github.com/vue-admin/vue-admin.git
3.Error: 'git checkout' failed with status 1
解決：保證你擁有master分支（不指定分支的情況）视卢，我之前的項(xiàng)目就只有一個(gè)分支叫main踱卵，不符合分支要求，所以會(huì)報(bào)錯(cuò)据过，但是他也會(huì)下載下來惋砂，只是提示不好看
但是如果指定分支的話不會(huì)報(bào)錯(cuò)，例如：
direct:https://github.com/vue-admin/vue-admin.git#main
