[前端进阶]从零搭建属于你的脚手架

大部分前端选手，也包括我自己，经常都是vue-cli，或者create-react-app一把梭。不得不承认这些著名的脚手架写的确实好，能够给我们做项目提速。但是久而久之很容易进入自己的舒适区，最近不是很流行“跳出舒适区”吗？而且各大培训机构都做贩卖焦虑，就为了可以让更多的人可以去买课。

这里我就不贩卖焦虑了。大家有自己的选择，只要自己不后悔就好。

二丶市面上脚手架的缺陷
虽然vue-cli等脚手架已经布置好了很多东西，包括router，css的解析等等。

但是！

但是啊，但是这些脚手架并不知道我们公司的或者说我们个人项目的网络请求，而且网络请求内部怎么封装的也没有统一的处理。也不知道我们的一些通用的登陆页等等。这些都需要我们重新的CV一下，或者自己重新做。

三丶过分使用别人搭建的脚手架可能会带来以下问题
忘记，或者不知道webpack或者路由的配置，经常会在面试的临时抱佛脚，不能够真正的掌握，终究是纸上谈兵
一些常见的坑点都被别人踩过并铺好路了，在不了解原理又没有踩过坑的情况下如果碰到问题很容易耽误大量的时间
一些新框架的升级，只能等别人的cli版本升级之后才可以享受。慢人一步！
配置一些项目相关的东西，经常需要翻看文档。
……
四丶原因
我们做脚手架有以下几个原因

学习脚手架的思想
了解脚手架的构成
省略一下CV的操作，更快更灵活的开始自己公司或者自己个人项目
可以深入的配置自己的项目
开始
准备工作
commander
用于node.js命令行界面的完整解决方案。基本上是前端脚手架必备的。

这里只介绍

version
command
description
action
简单使用，毕竟只是入门，后续一些复杂的定制化的就需要大家自己去探索了。

好了，收！

怎么用？

const { program } = require(‘commander’)
program
.version(react-cli-mobile ${packages.version})
.command('create ')
.description(‘初始化模板’)
.action((projectName, cmd) => {
const options = cleanArgs(cmd)
creator(projectName, options)
})
复制代码
fs-extra
fs-extra模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API
这里只介绍

copy 复制文件
existsSync

copy用于复制。网上的一些脚手架教程用的是[download-git-repo]库。我发现这个只能下载某个仓库的文件，这样的话会导致我的项目会有两个。一个用于脚手架的代码，另一个是template的仓库。这样我觉得不太适合我，因为我不是很想找脚手架上面下太多的功夫搞交互，我只是想可以更方便更快的新建我的项目，而且我也不想弄两个仓库，我觉得有点多余。

当然了，这只代表我的个人想法，大家可以自行选择。

怎么用？

const fs = require(‘fs-extra’)
if(fs.existsSync(targetDir)) {
console.error(‘目录已经存在’)
return
}

// 复制模板文件
await fs.copy(src, dest)
复制代码
path
很简单，字面意思，主要是用于配合【fs-extra】这个库来使用的，主要还是给copy提供路径，就不多介绍了

怎么用？

const path = require(‘path’)
const src = path.resolve(__dirname, dir);

const dest = path.resolve(process.cwd(), projectName);

// 复制模板文件
await fs.copy(src, dest)
复制代码
ok，至此差不多我们的一个脚手架就可以出来了，其他的一些log颜色，路径判断，单词差异优化都不在本次介绍的范围内，本文主要是完成一个脚手架，然后重头戏还是自己的template。
我目前是在职前端开发，如果你现在也想学习前端开发技术， 在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题， 你都可以申请加入我的前端学习群：1017810018里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题， 前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。