教你从零开始搭建一款前端脚手架工具

本文系原创，转载请注明：作者：Jrain Lau(https://segmentfault.com/u/jrainlau)项目地址：https://github.com/jrainlau/scion

前言

在实际的开发过程中，从零开始建立项目的结构是一件让人头疼的事情，所以各种各样的脚手架工具应运而生。笔者使用较多的 ， 和 便是当中之一。它们功能丰富，但最核心的功能都是能够快速搭建一个完整的项目的结构，开发者只需要在生成的项目结构的基础上进行开发即可，非常简单高效。

作为一个不折腾会死星人，在熟悉了使用方法以后就开始琢磨起它们的原理来了。经过仔细研究文档和源码，终于算是摸清了其核心的原理，并且依据这个原理自己搭建了一款叫做SCION的脚手架。

现在让我们就以SCION为例，从零开始搭建一款属于我们自己的脚手架工具吧！

核心原理

搭建项目需要提供 。 本质上就是一个具备完整文件结构的项目样板，用户需要手动地把这些 下载到本地，然后 就会根据这些 自动生成各种不同的项目。

提供了相当丰富的选项和设定功能，但是其本质也是从远程仓库把不同的 拉取到本地，而并非是什么“本地生成”的黑科技。

这样看来，思路也就有了——首先建立不同的样板项目，然后脚手架根据用户的指令引用样板项目生成实际项目。样板项目可以内置在脚手架当中，也可以部署在远程仓库。为了更广的适用范围， 采用的是第二种方式。

技术选型

node.js：整个脚手架工具的根本组成部分，推荐使用最新的版本。

es6：新版本的 对于 的支持度已经非常高，使用 能够极大地提升开发效率和开发感受。

commander：TJ大神开发的工具，能够更好地组织和处理命令行的输入。

co：TJ大神开发的异步流程控制工具，用更舒服的方式写异步代码。

co-prompt：还是TJ大神的作品……传统的命令行只能单行一次性地输入所有参数和选项，使用这个工具可以自动提供提示信息，并且分步接收用户的输入，体验类似 时的一步一步输入参数的过程。

整体架构

国际惯例，着手开发之前得先弄明白整体架构，看图：

首先明白 的概念。一个模版就是一个项目的样板，包含项目的完整结构和信息。

模版的信息都存放在一个叫做 的文件当中。

用户可以通过命令行对 进行添加、删除、罗列的操作。

通过选择不同的模版，SCION会自动从远程仓库把相应的模板拉取到本地，完成项目的搭建。

最终整个脚手架的文件结构如下：

入口文件

首先建立项目，在 里面写入依赖并执行 ：

在根目录下建立 文件夹，在里面建立一个无后缀名的 文件。这个 文件是整个脚手架的入口文件，所以我们首先对它进行编写。

首先是一些初始化的代码：

从前文的架构图中可以知道，脚手架支持用户输入4种不同的命令。现在我们来写处理这4种命令的方法：

的具体使用方法在这里就不展开了，可以直接到官网去看详细的文档。

最后别忘了处理参数和提供帮助信息：

完整的代码请看这里。

使用 运行这个文件，看到输出如下，证明入口文件已经编写完成了。

处理用户输入

在项目根目录下建立 文件夹，专门用来存放命令处理文件。

在根目录下建立 文件并写入如下内容，用来存放模版信息：

添加模板

进入 并新建 文件：

删除模板

同样的，在 文件夹下建立 文件：

罗列模板

建立 文件：

构建项目

现在来到我们最重要的部分——构建项目。同样的，在 目录下新建一个叫做 的文件：

可以看到，这一部分代码也非常简单，关键的一句话是

它的作用正是从远程仓库克隆到自定义目录，并切换到对应的分支。熟悉git命令的同学应该明白，不熟悉的同学是时候补补课啦！

全局使用

为了可以全局使用，我们需要在 里面设置一下：

本地调试的时候，在根目录下执行

即可把 命令绑定到全局，以后就可以直接以 作为命令开头而无需敲入长长的 之类的命令了。

现在我们的脚手架工具已经搭建好了，一起来尝试一下吧！

使用测试

add | a 添加模版命令

init | i 生成项目命令

delete | d 删除模版命令 和 list | l 罗列模版命令

大功告成啦！现在我们的整个脚手架工具已经搭建完成了，以后只需要知道模板的git https地址和branch就可以不断地往SCION上面添加，团队协作的话只需要分享SCION的文件就可以了。

后记

看起来并不复杂的东西，实际从零开始搭建也是颇费了一番心思。最大的难题是在开始的时候并不懂得如何像 那样可以一步一步地处理用户输入，只懂得一条命令行把所有的参数都带上，这样的用户体验真的很不好。研究了 和 也没有找到相应的代码，只好不断地google，最后总算找到了一篇文章，可以用 和 这两个工具实现，再一次膜拜无所不能的TJ大神，也希望能够有小伙伴告诉我 它们是怎么实现的。

这个脚手架只具备最基本的功能，还远远没有达到市面上同类产品的高度，在日后再慢慢填补吧，不管怎么说，完成SCION的过程中真的学习到了很多东西。

感谢你的阅读。我是Jrain，欢迎关注我的专栏，将不定期分享自己的学习体验，开发心得，搬运墙外的干货。下次见啦！

觉得本文对你有帮助？请分享给更多人

关注「前端大学」，提升前端技能