实现自定义脚手架

为什么要自定义脚手架?

首先,每次创建项目后都需要很多重复性操作,比如安装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

相关推荐
小中123416 分钟前
异步请求的性能提升
前端
我是天龙_绍17 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
我是天龙_绍1 小时前
Easing 曲线 easings.net
前端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo1 小时前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever1 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙4551 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
Hilaku1 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
m0_728033131 小时前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端
猪哥帅过吴彦祖1 小时前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl