Nodejs 知识体系(六): 脚手架基础这篇文章介绍了前端脚手架的基础概念，帮助读者了解脚手架的作用、工作原理以及在项

这篇文章介绍了前端脚手架的基础概念，帮助读者了解脚手架的作用、工作原理以及在项目开发中的重要性。

什么是脚手架?

• 脚手架又称 CLI (Command-Line Interface)
• 脚手架基于文本界面, 需要通过键盘输入命令来执行
• 前端常用的脚手架有 npm 、webpack-cli、vue-cli 等

为什么要学习脚手架开发?

命令行操作方式以其高效性被广泛应用于任务执行，尤其在前端开发中，脚手架工具极大地提高了开发效率。通过脚手架，例如 npm install，自动化解决了依赖下载和安装的问题，避免了手动下载、编写 package.json、解压依赖等繁琐工作。掌握脚手架不仅对提升前端开发效率至关重要，也是晋升为高级前端工程师或前端架构师的必备技能。了解项目的工程化流程，包括项目创建、启动和构建，是有效应用脚手架的基础，因此，脚手架知识是解决复杂工程问题的核心技能。

什么是 Bash 和 Shell?

简单来说，Bash 是一种程序，专门用于人机交互。与其他专注于完成特定任务（如计算器或文件管理）的程序不同，Bash 的主要职责是通过命令行接口执行其他程序。

Shell 是计算机提供给用户与程序进行交互的接口，它充当命令解释器的角色。当用户输入命令时，Shell 会解析这些命令并将其传递给操作系统内核进行处理。图形操作系统也是 Shell 的一种形式，称为 GUI Shell。Shell 是一个抽象的概念，类似于“壳”，而 PowerShell、Terminal 和 Bash 都是不同的 Shell 实现。它们都是人机交互的方式，在操作系统内核之上提供了一层用户友好的应用界面。

绝大多数人习惯使用图形化界面操作系统，但 Bash 采用了完全不同的方法：通过纯文本的控制台进行操作。它主要通过键盘输入文本和文字反馈来实现人机交互，提供了一种与图形界面截然不同的操作方式。

那么一个关键问题: 在 GUI 发展如火如荼的今天, Bash 过时了吗? 没有! 恰恰相反 Bash 在开发领域应用越来越广泛。Bash 最大的优势就是简单易用, 虽然它的显示效果不如 GUI, 但一旦熟练后操作效率远远大于 GUI !

支持的命令行的shell 有多少种?

脚手架命令组成部分

vue create vue-test-app

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

vue create vue-test-app --force

这行命令由三部分组成

• 主命令: vue
• command: created
• param: vue-test-app
• option: --force

它表示创建一个 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 registry.npm.taobao.org 后面的网址成为 option 的 param, 其实 --force 可以理解为 --force true 简写为 --force 或 -f。

脚手架命令执行过程

执行 vue create vue-test-app 命令发生了什么? 描述一下脚手架命令执行的全过程

1. 执行 vue create vue-test-app
2. 执行 which vue 找到 vue 命令路径
3. 找到路径 /usr/local/bin/vue , 它是一个软连接
4. 找到实际位置 ls -l vue
5. 使用 Node 执行 vue.js

vue create vue-test-app
🍀 colion $ which vue 
/usr/local/bin/vue
🍀 colion $ ls -l /usr/local/bin/vue
lrwxr-xr-x  1 root  wheel  86  1 23  2024 /usr/local/bin/vue -> /Users/admin/.volta/tools/image/node/20.10.0/lib/node_modules/@vue/cli/bin/vue.js
/Users/admin/.volta/tools/image/node/20.10.0/lib/node_modules/@vue/cli/bin/vue.js

脚手架的实现原理

如果你能回答以下 3 个问题, 就掌握了脚手架的实现原理:

• 为什么在全局安装 @vue/cli 后会添加的命令是 vue ?
• 全局安装 @vue/cli 时发生了什么?
• 执行 vue 命令时发生了什么? 为什么 vue 指向一个 js 文件, 我们却可以直接通过 vue 命令去执行它?

为什么在全局安装 @vue/cli 后会添加的命令为 vue ?

全局安装 @vue/cli 后，添加的命令为 vue，这是由 package.json 中的 "bin" 字段决定的。"bin" 字段定义了命令名称与实际执行文件之间的映射关系。例如：

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

这里的 "vue" 就是安装后可执行的命令名称，而 "bin/vue.js" 则是命令对应的脚本文件。也就是说，"bin" 中的配置决定了命令的名称与执行的文件。

全局安装 @vue/cli 时发生了什么?

当我们全局安装 @vue/cli 时，实际上发生了以下过程：

在 CLI 项目中，我们通过 bin 目录下的 index.js 实现了 CLI 的逻辑，并在 package.json 中配置了 "bin": { "vue": "bin/index.js" }。要使 colion 这个命令能够在终端中生效，我们需要了解安装时究竟发生了什么。

以 pnpm install @vue/cli 为例：

1. 首先，它会将我们的依赖包下载到指定的文件夹。
2. 然后，安装过程中会为 bin 字段中定义的命令创建一个软连接。

因此，想要让 colion 命令生效，我们需要安装一次脚手架。install 命令会自动将 package.json 中 bin 字段指定的命令与实际文件建立软连接，这样我们就可以在终端中执行 vue 命令了。

执行 vue 命令时发生了什么?

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

当我们执行 vue 命令时，首先操作系统会在环境变量中查找该命令是否存在，类似于执行 which vue，它会返回 vue 所在的位置：

which vue
/usr/local/bin/vue

这意味着执行 vue 实际上等价于执行 /usr/local/bin/vue：

vue === /usr/local/bin/vue

进一步查看，实际执行的文件可以通过以下命令来确认：

ls -l /usr/local/bin/vue
/usr/local/bin/vue -> /Users/username/.volta/tools/image/node/20.10.0/lib/node_modules/@vue/cli/bin/vue.js

可以看到 vue 实际指向的是 vue 脚手架项目中的 bin/vue.js

那么，.js 文件是如何执行的呢？它并没有直接通过 node vue.js 来执行。

查看源码时我们会发现文件开头有一行：

#!/usr/bin/env node

这行代码告诉操作系统，当直接调用该文件时，系统会先找到 node 命令，再通过 node 来执行这个文件。

那么，如何将我当前在 monorepo 项目中的本地 CLI 挂载到全局呢？

我们需要找到 Node.js 的全局 bin 目录，并创建一个指向 index.js 的软连接。具体步骤如下：

• 通过以下命令找到 node 的安装路径：

which node

• 进入 Node.js 的全局 bin 目录（以 Volta 为例）：

cd /Users/username/.volta/bin/

• 创建软连接，将 colion 命令指向本地 CLI 项目中的 index.js 文件：

ln -s /Users/username/apps/colion/packages/libs/cli/index.js colion

通过这些步骤，你的本地 CLI 工具就可以全局使用了。

如何为脚手架起别名?

ln -s ./vue vue2

结语

本篇文章介绍了脚手架的基本概念、命令的执行流程及其工作原理，旨在帮助理解脚手架的核心逻辑。在前端开发中，掌握脚手架不仅能够提升开发效率，也是成为高级前端工程师的重要技能。接下来的文章将深入实战，逐步讲解如何定制和开发专属的脚手架工具，助力在实际项目中灵活应用这些知识，敬请期待！