脚手架简介
脚手架本质是一个操作系统的客户端,通过命令行执行。
以vue2的脚手架Vue cli为例,通过执行以下命令来创建vue项目
vue create vue-test-app
脚手架的核心价值
提升前端研发效能
脚手架的功能
将研发过程
- 自动化:项目重复代码拷贝/git操作/发布上线操作
- 标准化:项目创建/git flow/发布流程/回滚流程
- 数据化:研发过程系统化、数据化,使得研发过程可量化
脚手架的命令【详解】
通过下方范例命令,来看看命令的格式
vue create vue-test-app --force -r https://registry.npm.taobao.org
- vue 是主命令,通常是脚手架的名称或方便记忆的别名(脚手架Vue cli在安装时使用的@vue/cli,命令中使用的别名 vue)
- create 是脚手架内部名义的命令,通常表示脚手架执行某项操作,这里是创建
- vue-test-app 是命令的参数,此处为自定义的新创建的vue项目的项目名称。
- –force 是命令的配置(–前缀的都是命令的配置),命令的配置也有参数,此处进行了简写,完整写法是
--force true
,此配置表示如果当前目录已经有文件,则覆盖当前目录下的文件,强制创建vue
项目, - -r 是–registry的简写(-前缀的都是命令配置的简写),此配置表示注册
- https://registry.npm.taobao.org 是 -r 配置的参数,此处表示将下载源改为淘宝源
查看脚手架命令相关配置的方法是用 --help,如
vue create --help
脚手架的执行原理
- 在终端输入 vue create vue-test-app
- 终端解析出 vue 命令
- 终端在环境变量中找到 vue 命令
- 终端根据 vue 命令链接到实际文件 vue.js
- 终端利用 node 执行 vue.js
- vue.js 解析 command / options
- vue.js 执行 command
- 执行完毕,退出执行
自研脚手架和自动化构建工具的区别
- jenkins、travis等自动化构建工具通常在git hooks中触发,需要在服务端执行,无法覆盖研发人员本地的功能,如:创建项目自动化、本地git操作自动化等。
- jenkins、travis等自动化构建工具定制过程需要开发插件,过程较为复杂,需要使用Java语言,对前端不够友好