开发脚手架CLI

Face2025-06-12 9:56

开发一个 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