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

本文系原创,转载请注明:作者: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,欢迎关注我的专栏,将不定期分享自己的学习体验,开发心得,搬运墙外的干货。下次见啦!

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

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

本文来自企鹅号 - 程序媛媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我是攻城师

多线程基础知识了解一下

作为一名优秀的攻城师,了解多线程的知识非常有必要,尤其在人工智能和机器学习的热潮下,如何提高程序或者算法的运行效率是非常有价值的一件事情。

2673
来自专栏七夜安全博客

go go go - beego

在上一篇文章What!!! so fast中,我介绍了golang这种语言,并使用golang开发了一个端口扫描工具。现在我的主要工作是做网络安全方面的开发与策...

3452
来自专栏SDNLAB

DLUX组件扩展上篇-原理

作者: M.S-Group.皮皮熊,M.S-Group组织主要成员之一,数通行业老兵,精通传统数通网络技术,SDN/NFV新技术的狂热拥护者!

1184
来自专栏申龙斌的程序人生

零基础学编程023:用with实现优雅地释放资源

在《零基础学编程022:函数的世界》中我们写了一个函数,通过访问新浪的实时行情服务,得到股票的开盘价。 import urllib.request as re...

36414
来自专栏王亚昌的专栏

采用共享内存或文件映射的方式保存用户数据

    举个例子,假如一个网站提供给用户8种特权服务,用户可以选择性的开通其中一个或多个,而用户一般的操作行为是查看自己的特权以及查看好友的特权。这类数据的特点...

1092
来自专栏架构师之路

90行代码,搞定日志监控框架

上一篇《100行代码,搞定http监控框架》介绍了通用+可扩展的http监控平台的架构: 监控平台层:调度监控项,通过后台管理监控项 信息管理层:通过服务和后台...

1K7
来自专栏F-Stack的专栏

F-Stack Q&A 第三期

Q1:如果在一个阻塞型的socket上执行recv,会不会把相应的线程卡死,调用recv时该socket中没有数据包,导致sleep,sleep导致该线程没办法...

6889
来自专栏hotqin888的专栏

beego结合bootstrap table和x-editable用于merit价值和成果管理系统

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

2473
来自专栏云之翼

在虚拟机上容器环境性能--动态测试问题分析总结(二)

在上一篇中,介绍了静态测试场景,本文介绍动态性能测试的差异分析,希望大家可以借鉴。

1490
来自专栏py+selenium

py+appium微信公众号自动化(已搞定多个坑)

微信公众号自动化与app自动化还是有区别的,因为多了不少坑。打开微信x5内核调试的就不说了,百度有。

5245

扫码关注云+社区

领取腾讯云代金券