1. 简述
做为程序员,就是把复杂的事情简单化,越简单约好,越一键化越完美,开发实际业务时我们都需要先搭建一套运行环境,安装相关依赖,搭建相关的基础架构和封装一些方法以及构建项目等,不然每次都需要自己手动搭建,而且这个过程繁杂还重复,因此,最好是能够一键化搭建自己的开发环境,相信所有的开发人员都是这样,在前端而言,搭建脚手架CLI就是必经之路。讲讲搭建脚手架的好处:
- 一键化搭建项目结构
- 规范项目结构
- 封装最佳实践
因此,博主在这里详细的介绍如何搭建前端的脚手架。
2. 开始搭建
2.1 介绍必要依赖
- chalk: 用于高亮在终端打印出的日志,一般用于打印出好看的日志给用户看!
- clear:用于清空终端命令,一般用于项目开始。
- commander: 用于解析终端的输入命令,这样我们就能在终端输入命令然后执行代码,如 vue create appName
- download-git-repo: 用于从git仓库中拉取项目,一般我们的项目模板都存在git仓库中,使用这个库进行拉取
- figlet: 用于在终端打印出酷炫的日志
- handlebars:轻量的语义模板,可进行模板解析
- inquirer: 用于在终端进行询问,用户可回答yes/no
- open:用于自动打开浏览器
- ora: 用于显示进度条
2.2 编写CLI
首先项目初始化后,安装对应的依赖
npm init -y
npm install -S chalk clear commander download-git-repo figlet handlebars inquirer open ora
- 创建自己的 bin(启动命令)
- 根据自己的设定设置commander命令
- 拉取自己的模板
- 安装依赖
- 自动构建启动等
基本上编写CLI的步骤比较简单,就是按照基本的js来写,这里写得十分的简单,之后博主会将自己的 CLI 地址贴出来,同时详细介绍!