脚手架开发

什么是 Shell、Bash、Cli？

Shell

1. Shell 是计算机提供给用户与其他程序进行交互的接口，它是一个命令解释器，当你输入命令后，由 Shell 进行解释后交给操作系统内核进行处理，如我们拷贝文件的命令 cp，当我输入这个命令时它实际会去调用操作系统的指令完成操作

2. Shell 分为图形操作系统（GUI Shell）和命令行交互，如电脑上的各种软件属于图形操作系统，而在命令行上输入的则是另一种

3. Shell 是一个抽象的概念

Bash

1. Bash 是一种程序，它的职责是用来进行人机交互，Bash 和其他程序最大区别在于，它不是用来完成特定任务（如计算器、文件管理等），bash shell 是用来执行程序的

2. Bash 使用的是纯文本的控制台进行控制，而不是图形界面操作系统，这样更加的简单易用

3. Bash 是 Shell 的具体实现

Cli

1. Cli（命令行界面）是一种基于文本界面（类似：MacOS 终端、Windows cmd.exe），用于运行程序

2. Cli 接受键盘输入，在命令符号提示处输入命令，然后由计算机执行并返回结果

总结

1. Shell 是操作系统提供的接口程序，用于接收用户输入的命令，交给操作系统内核执行并接收响应结果

2. Bash 是 Shell 的一个实现，用于执行用户输入的命令

3. Cli 是 Bash 的运行环境，Cli 接收用户键盘输入，交给 Bash 执行，并将程序处理结果以文本形式进行显示

从使用角度理解什么是脚手架？

脚手架本质是一个操作系统的客户端，它通过命令行执行，比如：

vue create vue-test-app

上面这条命令由 3 个部分组成

- 主命令：`vue`
- command：`create`
- command 的 param：`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

其实 --force 可以理解为 --force true，简写就是 --force 或 -f

脚手架执行原理

这里以 vue-cli 为例

执行原理如下：

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

从应用的角度看如何开发一个脚手架

可以通过 which vue 命令来找到实际的 vue 执行的目录

• 开发 npm 项目，该项目中应包含一个 bin/vue.js 文件，并将这个项目发布到 npm
• 将 npm 安装到 node 的 lib/node_modules
• 在 node 的 bin 目录下配置 vue 软链接指向 lib/node_modules/@vue/cli/bin/vue.js

这样我们在执行 vue 命令的时候就可以找到 vue.js 进行执行

这边有几个核心问题

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

   因为 @vue/cli 项目的 package.json 中的 bin 配置

   ```
   "bin": {
       "vue": "bin/vue.js"
   }
   ```
   

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

   第一步，会把 @vue/cli 下载到全局 node 的 lib/node_modules 中

   第二步，解析 package.json 的 bin 配置，如果有，则会在 node 的 bin 目录下创建一个 vue 的软链接指向 lib/node_modules

3. 为什么 vue 指向一个 js 文件，我们却可以直接通过 vue 命令直接去执行它？

   因为实际的 vue.js 文件的头部有声明以下的代码，表示此文件用 node 环境去运行

   #!/usr/bin/env node
   

简述脚手架命令执行的全过程

脚手架框架

1. yargs (opens new window)

   • 周下载量 6000w+
   • 案例：
     • gulp-cli

2. commander (opens new window)

   • 周下载量 8000w+
   • 案例：
     • vue-cli
     • webpack-cli
     • create-react-app

3. oclif (opens new window)

   • 脚手架生成器

脚手架开发

核心点

1. 分包：将复杂的系统拆分成若干个模块
2. 命令注册

vue create
vue add
vue invoke

3. 参数解析

主要使用 node 的 process 中的 argv

vue command [options] <params>

• options 全称：--version、--help

• options 简写：-v、-h

• 带 params 的 options：--path /Users/chenjie/Desktop/vue-test

• 帮助文档

  • global help
    • Usage
    • Options
    • Commands
  • command help
    • Usage
    • Options

4. 命令行交互
   • node 内置库 readline
   • 主要使用第三方库 inquirer (opens new window)
5. 日志打印
   • 主要使用第三方库 npmlog (opens new window)
6. 命令行文字变色
   • 原理是 ANSI escape code (opens new window)
   • 主要使用第三方库 chalk (opens new window)
7. 网络通信：HTTP/WebSocket
8. 文件处理
9. 进度 loading 展示
   • 主要使用第三方库 ora (opens new window)

开发流程

1. 创建 npm 项目
2. 创建脚手架入口文件，最上方添加：

#!/usr/bin/env node

3. 配置 package.json，添加 bin 属性
4. 编写脚手架代码
5. 将脚手架发布到 npm

开发调试技巧

1. 在本地创建和 npm 发布项目同名的文件夹，然后进行 npm install -g，这样就会创建一个的软链接就会指向本地的这个项目，而不会指向远程的项目

2. 在本地项目中使用 npm link

   • 脚手架本地 link 标准流程

     • 链接本地脚手架

     cd your-cli-dir
     npm link
     

     • 链接本地库文件

     cd your-lib-dir
     npm link
     cd your-cli-dir
     npm link your-lib
     

     • 取消链接本地库文件

     cd your-lib-dir
     npm unlink
     cd your-cli-dir
     # link 存在
     npm unlink your-lib
     # link 不存在
     rm -rf node_modules
     npm install your-lib -S
     

   • 理解 npm link

     • npm link your-lib：将当前项目中 node_modules 下指定的库文件链接到 node 全局 node_modules 下的库文件
     • npm link：将当前项目链接到 node 全局 node_modules 中作为一个库文件，并解析 bin 配置创建可执行文件

   • 理解 npm unlink

     • npm unlink：将当前项目从 node 全局 node_modules 中移除
     • npm unlink your-lib：将当前项目中的库文件依赖移除

   作者：chenjie
   链接：https://webchenjie.cn
   来源：ChenJieBlog