如何创建脚手架前端

 如何创建脚手架前端呢？下面就跟小编一起来看一看吧。

工具/环境

方法/步骤

1

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


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


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

2

核心原理

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


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


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


3

技术选型

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


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


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


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


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


4

整体架构

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

首先明白模版的概念。
一个模版就是一个项目的样板，包含项目的完整结构和信息。
模版的信息都存放在一个叫做templates.json的文件当中。
用户可以通过命令行对templates.json进行添加、删除、罗列的操作。
通过选择不同的模版，SCION会自动从远程仓库把相应的模板拉取到本地，完成项目的搭建。


5

使用测试

add | a 添加模版命令

init | i 生成项目命令

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

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


教程结束。

注意事项