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