脚手架的核心目标是:提升前端研发效能
1.脚手架核心价值
将研发过程:
自动化:项目重复代码拷贝/git操作/发布上线操作
标准化:项目创建/git flow/发布流程/回滚流程
数据化:研发过程系统化、数据化,使得研发过程可量化
1.1 脚手架本质
1.node在window中是一个node.exe,在Mac中是一个可执行文件(node*),因为node是操作系统的一个客户端,脚手架的本质是通过node去执行js文件,所以也可以说脚手架的本质是操作系统的客户端。
2.本质来说没有区别,PC安装的应用只是提供了一个GUI,脚手架是通过命令的形式
2.从使用角度理解什么是脚手架
2.1脚手架简介
脚手架本质是一个操作系统的客户端,它通过命令执行,比如:vue-cil
1 | vue create vue-test-app |
上面命令由3个部分组成:
主命令:vue
command:create
command的params:vue-test-app
他表示创建一个vue的项目,项目的名称为vue-test-app,以上是一个较为简单的脚手架命令,但实际场景往往更加复杂,比如:
当前目录已经有文件了,我们需要覆盖当前目录下的文件,强制进行安装vue项目,此时我们就可以输入
1 | vue create vue-test-app --force |
这里的–force叫做option,用来辅助脚手架确定在特定场景下用户的选择(可以理解为配置)。还有一种场景:
通过vue create创建项目时,会自动执行npm install帮用户安装依赖,如果我们希望使用淘宝源来安装,可以使用命令:
1 | vue create vue-test-app --force -r https://registry.npm.taobao.org |
这里的-r也叫做option,它与–force不同的是它使用-,并且使用了简写,这里的-r也可以替换成–registry,如果不知道vue create支持的所有options,可以使用:
1 | vue create --help |
-r https://registry.npm.taobao.org后面的https://registry.npm.taobao.org成为option的param,其实--force可以理解为:--force true,简写为:–force或-f
2.2脚手架执行原理
2.2.1脚手架的执行原理如下:
在终端输入vue create vue-test-app
终端解析出vue命令
终端在环境变量中找到vue命令
终端根据vue命令链接到实际文件vue.js
终端利用node执行vue.js
vue.js解析command/options
vue.js执行command/options
执行完毕,退出执行
3.从应用角度看如何开发一个脚手架
这里以vue-cli为例:
开发npm项目,该项目中应包含一个bin/vue.js文件,并将这个项目发布到npm
将npm项目安装到node的lib/node_modules
在node的bin目录下配置vue软连接指向lib/node_modules/@vue/cli/bin/vue.js
这样我们在执行vue命令的时候就可以找到vue.js进行执行
3.1 问题项
3.1.1 为什么全局安装@vue/cli后会添加的命令为vue?
1 | npm install -g @vue/cli |
在/usr/local/lib/node_modules/@vue/cli文件夹下的package.json的
1 | "bin":{ |
这个软连接的名称就是vue,所以添加后的命令为vue
3.1.2 全局安装@vue/cli时发生了什么?
先把@vue/cli下载到/usr/local/lib/node_modules中,然后根据@vue/cli下的package.json,根据bin中的定义去/usr/local/bin/下去定义@vue/cli的软连接vue
3.1.3 执行vue命令时发生了什么?为什么vue指向一个js文件,我们却可以直接通过vue命令去执行它?
1.终端在环境变量中找vue指令(相当于which vue命令),看有没有被注册,未注册则返回command not found,注册了则去找vue指令软连接指向的地址/usr/local/lib/node_modules/@vue/cli/bin/vue.js,去执行vue.js文件中的代码
2.因为这个js文件的顶部写了#!/usr/bin/env node,标识在环境变量中查找node,告诉系统使用node去执行这个js文件
4. 脚手架开发流程
4.1 开发流程
1.创建npm项目
2.通过npm init -f 创建一个package.json文件
3.配置package.json,添加bin属性,创建一个命令,指向 bin/index.js 作为入口文件;入口文件的最上方必须添加 #!/usr/bin/env node代码
4..编写脚手架代码
5.将脚手架发布到npm
4.2 使用流程
安装脚手架:npm install -g zhou.wp-cli
使用脚手架:zhou.wp-cli
4.3 发布
- 打开npm的官网,注册一个账号;
- 打开邮箱,进行验证;
- npm login 输入账号、密码和邮箱进行登录;
- npm publish 将项目发布上去。
5. 脚手架本地link标准流程
链接本地脚手架:
1 | cd your-cli-dir |
链接本地库文件:
1 | cd zhou.wp-cli |
取消链接本地库文件:
1 | cd zhou.wp-cli |
理解npm unlink:
npm link zhou.wp-cli:将当前项目中的node_modules下指定的库文件链接到node全局node_modules下的库文件
npm link:将当前项目链接到node全局node_modules中作为一个库文件,并解析bin配置创建可执行文件
理解npm unlink:
npm unlink:将当前项目从node全局node_modules中移除
npm unlink zhou.wp-cli:将当前项目中的库文件依赖移除