「中高级前端进阶」从零开始手写一个 vue-cli 脚手架

关注我的小伙伴应该知道，我之前写过一篇脚手架相关的文章，在掘金收获了近一千个赞，被前端大全和奇舞周刊公众号转载。

可以说自定义脚手架是每一个中高级前端都应该具备的能力。

1. 脚手架带来的便利

在现在前端全面拥抱 MVVM 框架的时代，初学者刚学 Vue/React的时候，很多教程都会告诉我们先使用脚手架创建一个项目原型：

不用我们进行多余的配置，就可以直接运行，方便快捷。

使用脚手架可以给我们带来很多便利：

1. 减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件；
2. 可以根据交互动态生成特定的项目结构和配置文件；
3. 多人协作更为方便，不需要把文件传来传去；

2. 自定义脚手架的诞生

基于以上的优点，当前大部分前端团队在前端工程化流程中，都会加入脚手架模块。那么脚手架到底是什么呢，虽然不同团队对脚手架工具在前端工作流中所扮演角色的理解不同，但是对于脚手架的定位是一致的：一个用来创建前端项目初始模板的命令行工具。

这是一个简单的定义，但是正如之前所言，不同团队对脚手架的理解和应用不同，侧重点也不一样，导致脚手架在不同团队中具体落地也不一样。

比如 ToB 的团队可能比较关心兼容性、功能性，对 UI 那些花里胡哨的东西不太关心；而 ToC 的项目对性能、安全、美观要求就比较高，针对这方面的配置也就更看重。针对不同性质的客户，项目配置又可能有所不同。这时对团队内脚手架的可定制性的自由度要求更高，开源的通用模板可能已经无法满足要求，所以就需要自定义前端脚手架。

我们可以看看一个成熟的前端团队项目开发流程：

可以看到脚手架位于开发阶段的最前方，而一个完备、成熟的团队自定义脚手架，可以让团队在进入不同需求类型的前端项目开发时，起点更高、产出更快、更节约人力，一次配置，多次使用。

对于业务开发者来说，这套现有的脚手架就是一个黑盒，他们不需要了解其中的复杂原理，只需要知道如何配置即可。业务开发者需要做的就是在脚手架生成的模板上继续开发，所以生成的配置项跟项目要尽量适配，既要满足项目的功能需求，又不能有多余的冗余功能。

另外，使用同一套脚手架模板，使得类似的项目有着相同的结构与代码规范，也有利于项目的后期维护。

开发自定义脚手架的好处这么多，那么如何开发一个适用于本团队的自定义脚手架呢。

3. 深入 vue-cli 源码并实现一个自己的脚手架

要实现一个类似于 vue-cli 的脚手架，首先看一下需要哪些工具库：

1. commander.js：一个命令行框架，用来解析用户命令行输入和参数。
2. handlebars.js：一个模板引擎，用来将用户提交的信息动态填充到文件中。
3. Inquirer.js：一个交互式命令行工具，像 vue-cli3 中那样在命令行中和用户交互。
4. chalk.js：给终端的字体加上颜色，更加炫酷。
5. download-git-repo：下载并提取 Git 仓库，主要用来下载项目模板。
6. log-symbols：在终端上显示出 √ 或 × 等的图标。
7. ora：在终端上显示一些小图标（loading、succeed、warn 等）。