脚手架设计(一)
脚手架的核心目标是：提升前端研发效能
1.脚手架核心价值
将研发过程：
自动化：项目重复代码拷贝/git操作/发布上线操作
标准化：项目创建/git flow/发布流程/回滚流程
数据化：研发过程系统化、数据化，使得研发过程可量化
1.1 脚手架本质
1.node在window中是一个node.exe，在Mac中是一个可执行文件（node*）,因为node是操作系统的一个客户端，脚手架的本质是通过node去执行js文件，所以也可以说脚手架的本质是操作系统的客户端。
2.本质来说没有区别，PC安装的应用只是提供了一个GUI，脚手架是通过命令的形式
2.从使用角度理解什么是脚手架
2.1脚手架简介
脚手架本质是一个操作系统的客户端，它通过命令执行，比如：vue-cil
vue create vue-test-app
上面命令由3个部分组成：
主命令：vue
command：create
command的params：vue-test-app
他表示创建一个vue的项目，项目的名称为vue-test-app，以上是一个较为简单的脚手架命令，但实际场景往往更加复杂，比如：
当前目录已经有文件了，我们需要覆盖当前目录下的文件，强制进行安装vue项目，此时我们就可以输入
vue create vue-test-app --force
这里的--force叫做option，用来辅助脚手架确定在特定场景下用户的选择（可以理解为配置）。还有一种场景：
通过vue create创建项目时，会自动执行npm install帮用户安装依赖，如果我们希望使用淘宝源来安装，可以使用命令：
vue create vue-test-app --force -r https://registry.npm.taobao.org
这里的-r也叫做option，它与--force不同的是它使用-，并且使用了简写，这里的-r也可以替换成--registry，如果不知道vue create支持的所有options，可以使用：
vue create --help
-r https://registry.npm.taobao.org后面的https://registry.npm.taobao.org成为option的param，其实--force可以理解为：--force true，简写为：--force或-f
2.2脚手架执行原理
image.png
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？
npm install -g @vue/cli
在/usr/local/lib/node_modules/@vue/cli文件夹下的package.json的
"bin":{
"vue": "bin/vue.js"
}
这个软连接的名称就是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标准流程
链接本地脚手架：
cd your-cli-dir
npm link
链接本地库文件：
cd zhou.wp-cli
npm link
cd zhou.wp-cli
npm zhou.wp-cli
取消链接本地库文件：
cd zhou.wp-cli
npm unlink
cd zhou.wp-cli
# link存在
npm unlink zhou.wp-cli
# link不存在
rm -rf node_modules
npm install -S 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：将当前项目中的库文件依赖移除
