如何开发一个项目脚手架cli

目录

背景

随着团队项目类型越来越多,方便后续快速去开发项目,会出现各种类型的项目模版项目。

这样开发只需要通过脚手架选择自己需要的项目类型,不需要去记住各个项目的代码仓库地址。

代码地址:https://github.com/duKD/create-editor-cli

正文

需要用到以下几个第三方库:

unbuild

一款轻量打包工具 默认支持ts , 可以输出 esModule commonjs 类型代码

prompts

用于终端命令行交互

progress

进度条

kolorist

优化字体显示样式

设置打包命令

javascript 复制代码
{
  "name": "create-editor-cli",
  "private": false,
  "version": "1.1.0",
  "description": "",
  // 在packjosn 文件中 设置打包命令 最终会被打包到 node_module 的 bin 目录下 
  "bin": {
    "create-editor-cli": "dist/index.cjs",
    "cec": "dist/index.cjs"
  },
  ...
 }

复习下 : 如何去使用 .bin 目录下的命令

  1. 全局安装的话 可以直接使用 cec 和 create-editor-cli
  2. 局部安装 的话 需要 在 packjson 的 script 中使用 或者 npx cec ,npx create-editor-cli

设计 更简单的使用方式

npm exec

npm exec 的执行流程

  • 在本地查找是否有对应的npm包
    • 若找到,则运行这个包的package.json中bin字段对应的可执行文件
    • 若未找到,在远程npm仓库查找是否有对应的npm包 若找到,加载完成后,再运行这个包package.json中bin字段对应的可执行文件

npx

直接 npx exec 和上面是一个效果

npm init/ npm create/ npm innit

javascript 复制代码
npm init xxx | npm create xxx 等价于 npx exec create-xxx

得出结论 当我们的包发到远程仓库时 可以直接 使用

npm create editor-cli 来创建项目

使用

pnpm create editor-cli 来初始化

javascript 复制代码
 ~ % pnpm create editor-cli
Library/pnpm/store/v3/tmp/dlx-59954      | Progress: resolved 1, reused 0, downlLibrary/pnpm/store/v3/tmp/dlx-59954      |   +1 +
Library/pnpm/store/v3/tmp/dlx-59954      | Progress: resolved 1, reused 0, downlLibrary/pnpm/store/v3/tmp/dlx-59954      | Progress: resolved 1, reused 0, downlLibrary/pnpm/store/v3/tmp/dlx-59954      | Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ 选择编辑器版本? › vue
✔ 输入项目名称 ... my-editor
开始下载模版...
========================================================================== 100%

下载完成,开始解压...

解压完成...

最后

由于私密安全问题 只提供了一个简单的实现思路 ,可以按照这个思路 ,去定制化开发属于自己公司的脚手架。

相关推荐
listhi5205 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木6 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊6 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost6 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns7 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年7 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴7 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心7 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart7 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter
Yeats_Liao8 小时前
Go Web 编程快速入门 13 - 部署与运维:Docker容器化、Kubernetes编排与CI/CD
运维·前端·后端·golang