开发脚手架CLI

开发一个 CLI 脚手架

什么是脚手架?

  • 本质上是一个命令行工具,比如:
shell 复制代码
vue create vue-project

# 如果当前目录已有文件,会提示是否覆盖
vue create  vue-project --force # 强制覆盖,简写 -f

# 假如创建完项目,安装依赖,如果用户希望使用淘宝源,则可以加上 --registry 参数
# vue create vue-project --registry=https://registry.npm.taobao.org
vue create vue-project -r https://registry.npm.taobao.org
# -r  --registry 简写,称为 options
# 淘宝源地址是参数,称为 argument

分析一下脚手架做了什么?

首先执行了

shell 复制代码
npm install -g @vue/cli

全局安装 vue-cli 的时候,发生什么?为什么安装后就会添加 vue 命令到全局?

执行 vue create vue-project 的时候,发生了什么?

  • vue-cli是一个 npm 包,包含了一个 bin/vue 文件,并已经发布到了 npm 上
  • 执行安装命令,npm 会从 npm 注册表中下载 vue-cli 包的最新版本及其依赖,命令行工具会把 vue/cli 安装到全局 node 下的 lib/node_modules
  • 在环境变量中注册 vue 命令,并配置软链接指向 lib/node_modules/@vue/cli/bin/vue.js
  • 当我们输入 vue create vue-project 的时候,终端会解析出是一个 vue 命令,然后在环境变量中找到 vue 命令,根据这个命令指向的软链接找到 vue.js,然后通过 node 执行 vue.js,解析 command / options,然后执行对应的逻辑
  • 执行完成后,退出

开发一个 CLI 脚手架

项目搭建

  • 统一开发流程(项目初始化,启动,打包,部署都可以收拢在脚手架内部完成,业务人员只用关注业务即可)
  • 与其他基建能更好的配合,比如代码检测,mock 等。都可以在脚手架层面对接

初始化项目

  • 全局链接配置
shell 复制代码
# 开发环境
# 发布
npm link
# 取消发布
npm unlink xxx # xxx 是包名

npm unlink -g custom-cli # 取消全局发布
  • babel 配置

实现基础指令

  • 帮助 (help)
  • 打包 (build)
  • 开发/启动 (start)
  • 初始化项目 (init)
  • 发布 (publish)

仓库地址,github.com/Fa-ce/cli 开发中ing

相关推荐
kyriewen8 分钟前
我用 AI 写代码快了 3 倍——然后同事的 Code Review 全变成了我的
前端·程序员·ai编程
进击的前栈22 分钟前
鸿蒙实战:全栈回顾——Kit API 全景、架构总结与未来演进
华为·架构·harmonyos
刀法如飞1 小时前
Spring Boot 4.1 + JDK 25 DDD开源脚手架,面向 AI 编程
设计模式·架构·ai编程
黒亱中旳1 小时前
面向桌面端的跌倒检测系统多线程并发架构优化实践
架构
李明卫杭州1 小时前
Vue2 portal-target 组件与 Vue3 的针对性优化
前端·javascript·vue.js
莫语陈1 小时前
端侧 Agent OS:手机架构与硬件协同设计
智能手机·架构
Tyler_12 小时前
iOS PlayWright mcp server
前端·ios·ai编程
武子康2 小时前
GPT-Live 全双工语音 Agent 深度拆解:连续交互 + 后台委托 + Voice Runtime 三层架构
人工智能·ai·chatgpt·架构·llm·交互
嘟嘟07172 小时前
从零理解 MCP:手写一个本地 MCP Server 并接入 LangChain Agent
前端·后端
cocoafei2 小时前
GPT-5.6 后,别再混淆 ChatGPT 和 Codex 额度了
前端·人工智能·chatgpt