NotionNext BLOGNestjs
前端
技术分享
Linux
Python
Rust
常用工具
🗒️如何开发一个脚手架
type
status
date
slug
summary
tags
category
icon
password
简介
你是否好奇如何通过命令
npm create vite@latest 来创建项目？使用脚手架可以是我们方便快捷的创建一些初始化的项目，这些基本都是一些常用的技术栈，比如 React、Vue、Angular、Node.js 等。那么，每次创建你是否都需要自己额外配置，如一些路由、存储、插件等？是否可以写一个脚手架专门用于创建属于自己常用的模板？下面，我将带你一起了解如何开发一个简单的脚手架。设计原理
通过脚手架克隆远程自己仓库的模板到本地，在一个项目中创建多个不同分支的模板，例如本项目中我的模板有：
- react
- react-shadcn
- vue
- vue-shadcn
- next
- next-shadcn
1、创建项目
创建一个空文件夹，然后在该文件夹下执行以下命令：
其
package.json 文件会自动生成，可以添加一些额外的配置，比如：【注意】：如果你想使用 npm create [脚手架名]命令，你的包名必须是 create-[脚手架名]，比如 create-vite。
2、安装依赖
2.1. 安装 tsup：
tsup 是一个 TypeScript 打包器，它可以将 TypeScript 编译成 JavaScript，并且可以将依赖项打包到一起。
2.2、安装 typescript
本项目使用 typescript，所以需要安装 typescript 依赖。
2.3、安装 commander
commander 是一个 Node.js 命令行解析器，可以方便的解析命令行参数。
2.4、安装 chalk
chalk 是一个用于在终端上输出颜色的库。
2.5、安装 inquirer
inquirer 是一个交互式命令行界面，可以让用户输入一些信息。如：输入、选择等
2.6、安装 degit（可选）
degit 是用来克隆远程 Git 仓库的命令行工具。（注意：这个库克隆不了 Gitee 的仓库，如果想要克隆 Gitee 的仓库，可以使用 giget）
2.7、安装 ora（可选）
ora 是一个用来显示命令行进度条的库。
3、创建文件
3.1、创建 tsup.config.ts 文件
3.2、创建 tsconfig.json 文件夹
3.3、创建 src/index.ts 文件
如果是可执行文件，必须在顶层加上 #!/usr/bin/env node 注释。
3.4、添加启动和打包命令
以上添加完毕后记得在
package.json 文件中的 scripts 中添加 "dev": "tsup --watch" 和 "build": "tsup" 命令。4、初始测试运行
如果输出
hello world 就说明初步的配置已经成功了，那么下面开始编写逻辑代码。5、编写逻辑代码
为了简洁明了，我将逻辑代码放在
src/index.ts 文件中，具体实现可以根据自己的需求进行修改。6、发布 npm
6.1、发布前的检查
- 检查
dist文件夹是否存在，如果不存在，请先执行pnpm build命令。
- 检查
package.json文件中的name和version是否正确。
- 检查
package.json文件中的files是否正确。
- 检查
package.json文件中的bin是否正确。
- 检查
package.json文件中的exports是否正确。
6.2、发布 npm
这里我希望是通过
Github action 去自动的发布。在这之前先查看一下注册源是否是:
https://registry.npmjs.org/查看当前镜像源：
如果不是，则需要修改镜像源：
6.3、登录 npm
6.4、生成 token
生成成功后复制下来
6.5、将 Token 添加到 GitHub 项目中的 Secrets：
- 打开你的
GitHub仓库。
- 进入
Settings>Secrets and variables>Actions。
- 点击
New repository secret。
- 添加一个名为
NPM_TOKEN的Secret，并将上一步生成的 Token 作为值保存。
6.6、编写工作流
创建
.github/workflows/publish.yml6.7、测试发布
如果发布成功或失败都会通过邮箱通知你，你自己也可以看看 Action 的进度。
7、使用脚手架
总结
通过本文，你应该对如何开发一个脚手架有了一个大概的了解，并且学会了如何使用
tsup 打包 TypeScript 项目，以及如何发布 npm 包。当然，脚手架的功能远不止这些，还可以实现更多的功能，比如：自定义模板、自动化测试、自动化部署等。学习永无止境！希望这篇文章能帮助到你。