前端脚手架的必要性
开发脚手架的核心目标:提升前端研发效能。
脚手架核心价值:
将研发过程
- 自动化:项目重复代码拷贝/git操作/发布上线操作
- 标准化:项目创建/git flow发布流程/回滚流程
- 数据化:研发过程系统化、数据化,使得研发过程可量化
和自动化构建工具区别:
问题:jenkins、travis等自动化构建工具已经比较成熟,为什么还需要自研脚手架?
- 不满足需求:jenkins、travis通常在git hooks中触发,需要在服务端执行,无法覆盖研发人员本地的功能,如创建项目自动化、本地git操作自动化等。
- 定制复杂:jenkins、travis定制过程需要开发插件,其过程较为复杂,需要使用Java语言,对前端同学不够友好。
脚手架简介
本质是一个操作系统的客户端。这是因为它过通过命令执行,而在终端中执行一个命令,其中这个命令本身就是一个客户端。
比如:
vue create vue-test-app --force
以上三个命令由三个部分组成:
-
主命令:vue
-
command:子命令 create
-
command 的 param:vue-test-app
-
option:--force,命令配置项
以上命令的执行原理:
- 输入
vue
:相当于执行which vue
,会在node安装目录下的bin
文件夹内找到vue@
文件夹,xxx@
表示一个超链接,链接到vue
真正的安装目录的node/node版本号文件夹/lib/node_modules/@vue/cli/bin/vue.js
文件。 - 终端利用
node
执行vue.js
vue.js
解析command / options
vue.js
执行 command- 执行完毕,退出执行
注
:
- node/node版本号文件夹/lib/node_modules:是在node中全局安装的npm包
开发脚手架的思路
- 开发一个
npm
项目,该项目中包含一个bin/vue.js
文件,并将这个项目发不到 npm上 - 将npm项目安装到
node
的lib/node_modules
- 在
node
的bin
目录下配置vue软连接指向lib/node_modules/@vue/cli/bin/vue.js
脚手架实现原理
通过回答以下3个问题来了解脚手架的实现原理:
-
为什么全局安装
@vue/cli
后会添加的命令vue
?在项目中的
package.json
文件中,有以下属性来设置脚手架的命令名称,以及对应的执行文件:... “bin”: { "vue": "bin/vue.js" } ...
-
全局安装
@vue/cli
时发生了什么?npm将全局安装的包下载到
node/node版本号文件夹/lib/node_modules
中,下载完后会去解析项目中的package.json
文件中的bin
属性,然后在node/node版本号文件夹/bin
中创建一个软链接,该软连接就指向lib/node_modules/项目中的package.json文件中bin
配置的命令对应的文件。 -
为什么
vue
指向一个js文件,我们却可以直接通过vue
命令直接去执行它?输入
vue
:相当于执行which vue
,会在node安装目录下的bin
文件夹内找到vue@
文件夹,xxx@
表示一个超链接,链接到vue
真正的安装目录的node/node版本号文件夹/lib/node_modules/@vue/cli/bin/vue.js
文件。.js
文件是不能直接自己执行的,在终端中输入命令却能执行的根本还是调用了node
来执行.js
文件。这是由于该.js
文件顶部有这样一行代码:#!/usr/bin/env node
其中,
/usr/bin/env
表示的是当前操作系统中的环境变量配置,/usr/bin/env node
就是在环境变量中查找node
。在.js
文件第一行添加这句代码表示去使用node
来执行当前文件。
简单创建一个node
命令:
- 在任意位置创建test.js文件,并在该文件第一行输入
#!/usr/bin/env node
; - 在node的软连接目录
bin
下,执行ln -S test.js文件的实际目录 test
创建软连接test@
,该软连接就指向test.js
文件,此时也就创建了test
的可执行命令
脚手架开发流程
开发流程:
-
创建
npm
项目 -
创建脚手架入口文件,最上方添加:
#!/usr/bin/env node
-
配置
package.json
,添加bin
属性 -
编写脚手架代码
-
将脚手架发布到到
npm
,在项目目录下:npm login npm publish
使用流程:
- 安装脚手架
npm install -g your-own-cli
- 使用脚手架
your-own-cli
脚手架开发难点解析
- 分包:将复杂的系统拆分成若干个模块
- 命令注册
- 参数解析
- options全称
- options简写
- 带params的options
- 帮助文档
- global help
- Usage
- Options
- Commands
- global help