实现自定义脚手架

为什么要自定义脚手架?

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

相关推荐
dy171714 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术6 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体