02-脚手架开发入门（前端架构师入门笔记）

#关键词#

• 脚手架
• 自动化
• 本地调试

#开发脚手架的必要性#

• 核心目标：提升前端研发效能（创建项目+通用代码；git操作；构建+发布上线）
• 核心价值：自动化、标准化、数据化
• 自动化构建工具（jenkins、travis）区别：不满足需求（创建项目自动化、本地git操作自动化）、定制复杂

#什么是脚手架#

本质是一个操作系统的客户端

1、命令示例：

• vue create vue-test-app --force -r https://xxx

2、命令组成：

• 主命令：vue
• command：create
• command的param：vue-test-app
• option配置：-f；--force；-r；--registry
• 它表示强制创建一个vue项目，项目名称为vue-test-app，并使用指定源进行安装依赖

3、执行原理：

• 在终端输入：vue create vue-test-app
• 终端解析出vue命令
• 终端在环境变量中找到vue命令：which vue 
• 终端根据vue命令链接到实际文件/lib/node_modules/@vue/cli/bin/vue.js：软链接
• 终端利用node执行vue.js
• vue.js解析command / options
• vue.js执行command
• 执行完毕，退出执行

#脚手架的实现原理#

1、为什么全局安装的@vue/cli后会添加的命令为vue？                  

• 脚手架的命令名称是由package.json中bin的配置决定的

2、全局安装@vue/cli时发生了什么？

• 安装@vue/cli，会把当前包下载到node/lib/node_modules目录下
• 下载完毕，解析package.json的bin配置，会去node/bin目录下创建一个软链接vue

3、执行vue命令时发生了什么？为什么vue指向一个js文件，我们却可以通过vue命令去执行它？

• 在环境变量中找到vue命令：which vue
• 根据vue软链找到到实际文件/lib/node_modules/@vue/cli/bin/vue.js
• 执行对应的js文件：js文件本身不能直接执行，需要通过node解释器执行
• 为什么vue.js可以直接执行：文件里加入了第一行：#!/usr/bin/env node：表示直接调用文件 ./xxx.js 的时候到我们环境变量找node命令，找到node命令后通过node命令执行，等价于/usr/bin/env node xxx.js；node xxx.js
• 如何将 vue 指向 ./xxx.js 文件：创建软链接（node/bin目录下创建ln -s /xxx/xxx.js vue，执行vue命令会直接执行到 ./xxx.js 文件）

4、为什么说脚手架本质是操作系统的客户端？它和我们在PC上安装的应用/软件有什么区别？

• 脚手架本质执行是依靠node命令，node本身是一个操作系统的客户端。
• 执行node test.js其实是把test.js中的代码变成字符串传入node当中，node对字符串进行解析并把它当成可执行程序进行执行
• 和我们在PC上安装的应用/软件本质没有区别，只是node缺少GUI界面，是通过命令行传入参数的方式执行

5、脚手架命令执行的全过程  

#脚手架的开发调试#

1、脚手架开发难点解析

• 分包：将复杂的系统拆分成若干个模块
• 命令注册
• 参数解析：帮助文档
• 命令行交互、日志打印、网络通信、文件处理等等......

2、快速入门第一个脚手架（DEMO见附件）

• 创建文件夹 hdk-test
• 初始化npm：npm init
• 新建bin目录，新建index文件，增加第一行 #!/usr/bin/env node
• package.json新增bin配置："hdk-test": "bin/index.js"
• npm 发布
• 安装脚手架：npm i @hdk-cli/hdk-test -g
• 执行 hdk-test 命令

3、脚手架本地调试

• npm remove -g @hdk-cli/hdk-test 
• 在脚手架上级目录npm i -g @hdk-cli/hdk-test ，会智能识别软链接到本地项目路径进行调试
• 在脚手架根目录上执行npm link，会软链到本地项目路径进行调试
• 分包场景如何调试：例如hdk-test；hdk-test-lib两个包，首先在各自包里执行npm link会将当前的项目链接到全局的node_modules中，指向我们的本地库文件，再回到当前的hdk-test项目中，执行npm link hdk-test-lib，当前项目会在node_modules里创建一个hdk-test-lib指向全局的hdk-test-lib，全局的又会软链指向我们本地的hdk-test-lib库文件
• 解除软链指向：npm unlink