1 前言
在前端开发过程中相信大家都用过不少工具,比如打包构建工具webpack、gulp;脚手架工具vue-cli、create-react-app等,那么这些工具都是怎么实现的呢?接下来、我们以脚手架工具为例,探索下脚手架工具的底层是如何实现的。
2 功能点分析
脚手架工具一般属于命令行程序,也就是没有图形界面,直接在命令终端执行。这时首要解决的问题就是IO操作问题,也是脚手架工具的核心,了解了IO相关功能的实现,从0实现一个脚手架应该也没什么大问题了。这里我将IO实现分成两部分讲解,控制台输入输出和文件的读写。大多数情况下,我们的项目模板可能会集成到npm,这里也会提下怎么在脚手架中实现项目模板或者是依赖的下载功能。
2.1 输入输出
1)输入
输入我们可能会想到输入框input,但是这里是控制台,没有DOM的概念,肯定是用不了的了,这里我们用的是stdin模块来使用,可以从node内置的process获取,也可以从ttys依赖获取。
stdin.on监听事件来监听用户的输入
还可以用readline封装一个接口实现
2)输出
一说到输出,大家肯定会想到console.log,但是在工具中的开发一般不会直接用这个方法,因为这个方法功能太单一了,无法实现一些复杂的输出。这里我们会用stdout模块来实现输出模块的功能,获取stdout模块和stdin模块类似。
而且console.log的底层其实就是用这个方法实现的。
stdout功能是比较强大的,可以指定格式输出,比如‘\033[1A’代表光标上移一位,这代表着我们可以利用光标的移动来实现一个局部的刷新。利用这一点还可以实现脚手架中常用的选择功能。
输出“hello world”
光标上移一位,执行后发现光标已移到“H”的位置
从光标位置输出Nihao,这时发现Hello已被替换成Nihao
封装光标上下左右移动方法
选择方法
最后执行
按w、 s可以上下移动光标选择
以上就是一些简单的BASH交互效果实现,如果想要了解更多更复杂的交互,可以参考文档:tldp.org/HOWTO/Bash-…
2.2 文件读写
控制台输入输出主要实现的是和用户交互,用户输入可以指定脚手架执行什么操作,输出则可以向用户反馈执行动态。这一部分呢实现后,接下来就是要听从用户的指令执行具体的操作了,一般这些操作都离不开文件的读写,我们可以直接使用node的内置fs模块实现这一功能。
引入fs模块
1)创建、写入文件
创建test.txt文件
2)读取文件
异步读取,不会阻断程序的进程,提升程序性能
同步读取,会阻塞程序的执行
3)复制文件
4)删除文件
以上就是常用的文件操作方法,如果需要了解更多的方法可以参考官方文档
2.3 实现下载
这里主要讲下用node集成的npm来实现下载,可能还有其它各种各样的实现方式,大家感兴趣可以自行去研究。
首先我们可以做个骚操作,在脚手架中安装npm
然后可以调用npm中的install方法来实现下载,比如我要下载webpack
3 总结
通过对输入输出、文件读写、下载实现的了解,我们可以发现实现一个脚手架其实并不是很难,如果没有太多的要求的话,甚至不需要天多的逻辑代码,直接做个简单的选择交互,然后复制或下载用户选择的项目模板到工作目录就可以了。