我搭建了一个前端脚手架-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50307964/article/details/132974017

文章介绍了如何创建和使用自定义的前端脚手架，包括通过固定模板简化项目初始化，修改package.json以自动填充项目信息，以及提供了Vue2结合axios和Electron的模板示例。作者分享了一个已实现的脚手架工具vue-future，并鼓励读者根据个人或公司需求搭建个性化的模板库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

theme: juejin

作为前端的我们，脚手架肯定也是经常使用；但是每次使用的时候都需要去配置基础设施，比如：axios、less、生产环境和开发环境、以及各种UI框架一类的，如果是移动端可能配置的东西就要更多一点了。那么我们就想弄一些模板啥的。我需要什么类型的项目就直接拿来用，那岂不是很方便。尤其是公司

最开始的想法是直接在GitHub上传一个初始化项目，然后想要的时候自己去拉取即可。

但是我最近看到脚手架就可以完成这些操作了，并且也是可以直接拉取GitHub的代码作为模板。也可以自己在脚手架中搭建。其中的原理都是差不多的。

至于脚手架的搭建方法大家可以参考这位博主写的文章，非常详细很适合我这种小白啦！掘金链接我放在这儿了从 0 构建自己的脚手架/CLI知识体系(万字) 🛠，本来是想自己写一篇文章了，但是发现这个博主写的真的太好了，所以我就没得再写的必要了。大家看他的文章即可，如果有不懂的地方也可以问我；可以大致跟大家说说。

大家在看文章的时候可能有些地方不是很明白的话可以结合博主的源码进行阅读。

这儿呢？

我给大家讲两处地方，

第一：模板

原来: 通过网络链接去获取模板

javascript const repoList = await wrapLoading(getRepoList, 'waiting fetch template');

修改后: 由于模板我是固定的就没有去通过链接地址生成了

javascript const repoList = [{ id: 1, name: 'vue2 + js' }, { id: 2, name: 'vue2 + ts' }];

他的生成版本号原理是一样的。

第二：修改package.js

同学们在创建项目的时候，都会提示我们是否手动输入package的名称以及作者还有描述一类的，我们既然是脚手架应该也需要这些东西；所以我们的增加这两个功能，这文章博主好像没有做这个。

由于我是直接在GitHub上拉取的项目，所以我这边是将项目拉取成功以后，再读取package文件并修改

大致如下:

javascript const jsonPath = `${targetAir}/package.json` // const jsonPath = require(`/template/package.json`); let jsonContent = fs.readFileSync(jsonPath, 'utf-8') jsonContent = JSON.parse(jsonContent); // console.log(jsonContent); jsonContent = Object.assign({},jsonContent,params); fs.writeFileSync(jsonPath, JSON.stringify(jsonContent,"","\t"))