脚手架设计(一)

脚手架的核心目标是：提升前端研发效能

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 发布

1. 打开npm的官网,注册一个账号；
2. 打开邮箱，进行验证；
3. npm login 输入账号、密码和邮箱进行登录；
4. 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：将当前项目中的库文件依赖移除