实现自定义脚手架

为什么要自定义脚手架?

首先,每次创建项目后都需要很多重复性操作,比如安装UI库、css预处理器。在业务层面,每次也要添加一些必备的功能,比如登录、404页面等。其次,可以锻炼自己的技术。

脚手架的功能

脚手架创建项目的流程:

  1. 让用户选择模板;

  2. 根据用户输入填充模板;

  3. 下载模板文件到创建的新文件夹中;

从框架来看,创建项目的时候需要选择是vue框架还是react框架,以及是否需要添加 typescript。

从插件来看,需要安装UI库、CSS预处理器、路由、全局状态管理器。

从项目功能来看,还需要封装fetch请求、登录、未登录页面、404页面、部署配置文件。

再参考一下vite,所以我们可以先设置几个模板,然后把小功能填充到模板里面。

具体的逻辑

1.判断远程是否有更新版本,如果有询问用户是否更新。

当前版本从package.json中获取。

远程版本用exec()获取:

js 复制代码
exec('npm show xx version', (error, stdout, stderr) => {})

2.询问用户想要的功能

inquirer库。

询问项目名、框架、是否添加 typescript、是否添加 electron 和 是否添加登录

3.拉取模板,拷贝模板到当前项目。

模板就是完整的最基础的项目,如果是必需的功能就直接加进去,如果需要用户选择是否添加则把该功能所在文件改为ejs文件。

在拷贝中判断文件是否是ejs文件,如果是则把用户的选择都传进去。

如果已经有同名项目,则在项目名后加(n)。

注:拷贝的时候模板需要用相对路径获取。

可以用ora库添加loading。

可能遇到的问题

1.npm create命令

npm create等价于npm init

npm init 是新建package.json文件,但 npm create xx 会先安装一个create-xx的包,然后执行这个包中的create-xx命令

通过npm exec create-xx来执行,npm exec可以执行本地或远程包中的命令。

所以,我们可以设置package.json中项目名为xx ,发布脚手架后,用户就可以通过npm create xx来通过脚手架创建项目。

2.npm link

可以通过以下命令在本地测试脚手架。

js 复制代码
npm link 将当前目录链接到全局

npm list -g --depth=0 查看全局list

npm unlink -g xx 删除,如果是全局一定要加-g

3.命令无法执行

bin/xx.js文件开头要加

js 复制代码
#!/usr/bin/env node

script声明命令时,文件需要添加.js后缀

4.ejs条件渲染时留下空行

<%_ ... _%>是不可行的。需要将开始标签紧贴着前一行,结束标签紧贴着可能显示的行。

js 复制代码
{
    a: 1,<% if (flag) { %> 
    b: 2,<% } %> 
    c: 3, 
}

5.生成的项目中不包含.ignore文件

将.ignore重命名为ignore,复制完所有文件后,单独复制ignore文件为.ignore,并删除复制后的ignore

js 复制代码
fs.copyFileSync(`${sourceDir}/gitignore`, `${targetDir}/.gitignore`); fs.unlinkSync(`${targetDir}/gitignore`);

6.引用requirer时报错Error [ERR_REQUIRE_ESM]: require() of ES Module ... from ... is not supported

降版本,可以降到v8.2.0

相关推荐
fruge21 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
sean1 天前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636021 天前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
太过平凡的小蚂蚁1 天前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫1 天前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳1 天前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng1 天前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪1 天前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛1 天前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能1 天前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端