我搭建了一个前端脚手架

站长

2023年06月04日 17:42 · 阅读数 20

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

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

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

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

这儿呢？

我给大家讲两处地方，

第一：模板

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

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

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

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

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

第二：修改package.js

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

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

大致如下:

        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"))

我的脚手架

现在我们就来说说我的脚手架了。

目前脚手架主要是两个模板：

vue2 + axios的一些常用封装方法；拉取下来直接使用即可
vue2 + electron + 热更新的一些常用方法的封装模板

后续可能会增加h5一类的项目

GitHub地址:

vue-future

npm地址：

vue-future

全局安装

npm install -g vue-future

查看命令:

future

创建项目:

future create my-name

以上命令即可创建项目了

vue2模板GitHub代码仓库 vue2-template

总结

以上搭建的脚手架可能对于很多人不太合适，亦或者不太喜欢。但是如果针对个人的喜爱搭建一些有固定的模板或者封装好的模板；下一次就可以直接使用即可了。

如果是公司的话，就搭建一些私域的，需要用到账号密码一类的然后才能创建项目即可了。

这样就避免了我们重复去搭建了。

如果您喜欢我的文章或者该文章对你有帮助，您也可以关注我的公众号：【前端雾恋】

往期文章

转载自:https://juejin.cn/post/7238510633967517754