实现一个自定义前端脚手架

一、背景

什么前端脚手架?

前端脚手架是一种工具,用于快速搭建前端项目的基础结构,提供了一套约定和标准,帮助开发人员快速启动项目开发。常见的前端脚手架包括Create React App、Vue CLI、Angular CLI、@nestjs/cli等。

我为什么要写一个自己的前端脚手架?

过去一年里,因为前端业务的需要,自己编写了一个前端脚手架,并在前端业务中应用,快速搭建项目,遵循最佳实践,提高开发效率。自定义脚手架可以减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件。根据交互动态生成项目结构和配置文件等。多人协作更为方便,不需要把文件传来传去。下面是我学习之后实现的一个简单前端脚手架,并发布到了NPM官网。

二、实现步骤

2.1、设计思路

  1. 提供命令行交互界面方便用户输入信息。
  2. 根据用户输入的信息从远端Git仓库拉取项目模板初始化项目。
  3. 发布到NPM,以便全局安装使用。
  4. 命令设计如下表2-1所示。

|----------------------------------------|----------|------------------------------|-----------------------------|
| 命令 | 描述 | 选项 | 描述 |
| create <project-name> | 初始化项目 | -f,--force | 如果project-name目录已经存在,则强制覆盖。 |
| create <project-name> | 初始化项目 | --template <template-name> | 制定模板或git仓库连接(sstring) |
| list | 显示所有模板 | - | - |
| add <template-name> <template-url> | 新增模板配置 | - | - |
| remove <template-name> | 删除模板配置 | - | - |
| ui | 界面操作 | -p, --port [port] | 指定端口 (number) |
| ui | 界面操作 | -h, --host [host] | 指定主机名称 (string) |
| - | - | -V,--version | 显示版本号 |
| - | - | -h,--help | 显示可用的CLI选项 |
| help [command] | 显示命令帮助信息 | --help | 显示命令帮助信息 |
| ... | - | - | - |
[表2-1 命令设计]

2.2、初始化项目

  1. 执行如下初始化命令
bash 复制代码
# 创建项目目录
mkdir ./action-cli
# 跳转项目目录
cd ./action-cli
# 初始化node,-y表示后续输入等均为默认
npm init -y
  1. 在根目录下创建src/index.ts文件作为入口文件,并添加以下内容:
bash 复制代码
#! /usr/bin/env node
console.log('Hello,world!');
  1. 安装依赖

安装依赖要注意版本号,否则实现过程会报错,报错的话就降低版本重新安装就好了。pnpm安装依赖报错或找不到依赖的换npm。

bash 复制代码
# 安装commander模块,该模块用于处理命令行参数。
npm i commander@9.0.0
# 安装inquirer模块,该模块用于实现交互式命令行界面。
npm i inquirer@8.2.1
# 安装chalk模块,该模块用于添加颜色和样式到控制台输出。
npm i chalk@4.0.0
# 安装ora模块,该模块用于显示动画加载效果。
npm i ora@5.4.1
# 安装figlet模块,该模块用于生成ASCII艺术字。
npm i figlet@1.5.2
# 安装download-git-repo模块,该模块用于下载并提取Github/Git(template本地)仓库中的文件。
npm i download-git-repo@3.0.2
# 安装handlebars模块,该模块用于处理模板文件。
npm i handlebars@4.7.6
# 安装fs-extra模块,该模块用于对文件系统进行更强大的操作。
npm i fs-extra@10.0.1
# 安装log-symbols模块,该模块用于在控制台输出不同类型的日志符号(√或×)。
npm i log-symbols@4.1.0
# 安装axios模块,该模块用于发起HTTP请求。
npm i axios@0.26.1
# 安装gitee-repo模块,该模块用于从Gitee仓库中下载模板文件。
npm i gitee-repo@0.0.2
# ts-alias用于ts转换时处理路径别名
pnpm i typescript @types/node ts-alias -D
  1. 根目录下package.json和tsconfig.json的配置如下。
bash 复制代码
# package.josn
{
  "name": "action-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc && tsc-alias",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "action": "/bin/src/index.js" # key会作为运行命令名,如action create demo
  },
  "keywords": [
    "cli",
    "action-cli",
    "Vue",
    "React"
  ],
  "author": {
    "name": "",
    "email": "",
    "url": ""
  },
  "license": "ISC",
  "dependencies": {
    "axios": "^1.6.7",
    "chalk": "^4.0.0",
    "commander": "^12.0.0",
    "download-git-repo": "^3.0.2",
    "figlet": "^1.7.0",
    "fs-extra": "^11.2.0",
    "gitee-repo": "^0.0.2",
    "inquirer": "^8.2.1",
    "ora": "^5.0.0"
  },
  "devDependencies": {
    "@types/fs-extra": "^11.0.4",
    "@types/inquirer": "^8.2.1",
    "@types/node": "^20.11.20",
    "tsc-alias": "^1.8.8",
    "typescript": "^5.3.3"
  }
}

tsconfig.json需要自己创建,并添加以下内容。

bash 复制代码
# tsconfig.json
{
    "compilerOptions": {
        "outDir": "./bin", # ts转换js输出目录
        "target": "es5",
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "sourceMap": false,
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules"
    ],
}
  1. 运行测试

项目根目录下打开命令行窗口,执行如下命令:

bash 复制代码
# 打包,ts转换js
npm run build
# 将脚手架映射到全局
npm link
# 卸载
# npm unlink action
# 运行脚手架
action # 输入Hello,world!

三、实现结果

四、参考文献

【前端脚手架】实现一个自己的脚手架

【手把手教你实现前端脚手架】

相关推荐
foxhuli229几秒前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔32 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺32 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear35 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息37 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月38 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201842 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿43 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘43 分钟前
vue文本插值
javascript·vue.js·ecmascript
高山莫衣1 小时前
git rebase多次触发冲突
大数据·git·elasticsearch