开发一个自己的前端CLI
前言
在前端开发中，拥有一套高效、简洁、适合自己的前端项目构建工具是非常有必要的。毕竟市面上不是所有的工具都能满足自己复杂工作的需要。此外也希望可以将此技术服务于其他的伙伴们。
搭建CLI准备
每一次成功，我们都是站在巨人的肩膀上。
首先简单介绍几个常用的依赖的包
- commander：命令行接口的完整解决方案，设置一些node命令，如help、usage、version、parse输入的参数。
- download-git-repo：git代码下载库，存到本地。
- chalk: node终端样式库，可以修改console的输出颜色。
- inquirer: 用户与命令行之间的交互问答工具。
- ora：终端旋转器，loading小圈圈。
- rimraf：删除文件。
初始化项目
创建项目文件夹，执行以下命令，创建项目package.json。
1npm init
初始化结果
1{
2 "name": "vadm",
3 "version": "0.0.1",
4 "description": "vue-admin cli tools",
5 "main": "main.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1"
8 },
9 "keywords": [
10 "vue-admin",
11 "vadm"
12 ],
13 "author": "rushuinet",
14 "license": "ISC"
15}
编辑项目
修改package.json文件，添加bin中的CLI将是我们执行的命令，和依赖库。
1{
2 "name":"vadm",
3 "version":"0.0.1",
4 "description":"vue-admin cli tools",
5 "main":"main.js",
6 "bin":{
7 "CLI":"./bin/cli"
8 },
9 "scripts":{
10 "test":"echo \"Error: no test specified\" && exit 1"
11 },
12 "dependencies":{
13 "inquirer":"^4.0.0",
14 "ora":"^1.3.0",
15 "rimraf":"^2.6.2",
16 "chalk":"^2.3.0",
17 "commander":"^2.11.0",
18 "download-git-repo":"^1.0.1"
19 },
20 "keywords":[
21 "cli"
22 ],
23 "author":"rushuinet",
24 "license":"ISC"
25}
新增bin/vadm目录文件，编写bin/vadm文件。
1#!/usr/bin/env node
2//第一行其中#!/usr/bin/env node表示用node解析器执行本文件。
3
4const program = require("commander");
5const pkg = require("../package");
6const chalk = require("chalk");
7const download = require("download-git-repo");
8const ora = require("ora");
9const spinner = ora("Loading undead unicorns");
10
11/**
12 * version
13 */
14program.version(chalk.green(`${pkg.version}`));
15
16/**
17 * init 项目
18 */
19program
20 .command("init <app-name>")
21 .description(
22 "generate a project from a remote template (legacy API, requires ./wk-init)"
23 )
24 .option("-c, --clone", "Use git clone when fetching remote template")
25 .action((appName, opts, cmd) => {
26 spinner.start("开始下载");
27 download(
28 "direct:https://github.com/vue-admin/vue-admin.git#main",
29 appName,
30 { clone: true },
31 (err) => {
32 if (err) {
33 spinner.fail(chalk.green("下载失败 \n" + err));
34 process.exit();
35 }
36 spinner.succeed(chalk.green(`下载成功`));
37 }
38 );
39 });
40
41program.parse(process.argv);
到此一个简单的cli就搭建完成。
本地调试
本地安装
1npm install -g
2OR
3npm link // 添加软连接
调试
1// 查看版本号
2vadm -V
3OR
4node bin/vadm -V
5
6// 初始化项目
7vadm init <app-name>
8OR
9node bin/vadm init <app-name>
发布到npm
1npm login
2npm publish
踩坑点
1.required ora和chalk错误问题: Error [ERR_REQUIRE_ESM]: require() of ES Module
高版本不支持require,目前改为以下版本解决：
1 "ora":"^5.1.0",
2 "chalk":"^4.1.2",
2.Error: ‘git clone’ failed with status 128
解决：地址要保证使用的是https模式，地址加前缀，例如：
1direct:https://github.com/vue-admin/vue-admin.git
3.Error: ‘git checkout’ failed with status 1
解决：保证你拥有master分支（不指定分支的情况），我之前的项目就只有一个分支叫main，不符合分支要求，所以会报错，但是他也会下载下来，只是提示不好看 但是如果指定分支的话不会报错，例如：
1direct:https://github.com/vue-admin/vue-admin.git#main
项目地址
https://github.com/vue-admin/vadm
发布日期：2023-08-10 19:51 字数：318 用时
tags：Cli
标签云
alpine(1) api网关(1) async(1) await(1) centos(4) cli(1) client-go(1) debug(1) docker(10) docker-compose(1) dockerfile(1) embed(1) es6(1) etcd(1) etcdctl(1) freemesh(2) git(6) go(5) go-zeus(5) goland(2) golang(7) grafana(2) grpc(5) grpcurl(1) homebrew(1) homedir(1) http(2) hugo(1) java(2) javascript(3) job(1) js(1) json(1) k8s(16) k8s部署指南(1) kubebuilder(1) kubectl(4) kubernetes(1) linux(2) localecompare(1) lombok(1) metrics(2) mock(1) mysql(1) npm(1) nsenter(1) nvm(1) pnpm(2) pprof(1) prettier(1) prometheus(2) protobuf3(1) protoc(1) qiankun(1) request(1) scss(1) servicemesh(1) spring(1) springcloud->freemesh(1) ssh(2) systemctl(1) tcpdump(1) typescript(2) vite(2) vscode(2) vue(8) vue-admin(2) vue3(1) webssh(1) xtermjs(1) xxl-job(1) yarn(1) zookeeper(1) 云原生(4) 云原生框架(1) 介绍(1) 单体架构->freemesh(1) 单元化(1) 博客(1) 压缩(1) 可观测(1) 后台管理系统(1) 命名规范(1) 多云多活(1) 如水网(1) 安全(1) 安装(1) 容器(2) 开发联调神器(1) 微前端(1) 微服务(2) 微服务架构->freemesh(1) 微服务框架(1) 快速开始(1) 控制面(1) 数据面(1) 文集(2) 服务发现(1) 服务网格(1) 流量泳道(1) 流量管理(1) 监控告警(1) 端口映射(1) 证书(1) 负载均衡(1) 配置(1)