【Javascript】脚手架的实现原理

学习环境：MAC OS

脚手架的实现原理

如果您能回答以下问题，就掌握了脚手架的实现原理：

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

npm install -g @vue/cli

这是因为在\node_global\node_modules\@vue\cli\package.json有如下配置："bin": {"vue": "bin/vue.js"}。

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

  1. 下载依赖到\node_global\node_modules目录
  2. node/bin新增软链接：vue->\node_global\node_modules\@vue\clibin\vue.js

• 执行vue命令时发生了什么？

  在环境变量中寻找vue,如果存在则执行，不存在则报错。

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

  node/bin目录中存在vue软链接指向实际的入口 js 文件。入口文件头部声明了解释器#!/usr/bin/env node且 可以在环境变量中找到node命令。所以当我们运行 vue 命令时，相当于是执行了node \node_global\node_modules\@vue\clibin\vue.js

脚手架原理进阶

• 为什么说脚手架本质是操作系统的客户端？它和我们在 pc 上安装的应用有什么不同？

我们编写的 js 文件实际是作为 nodejs 参数传入执行的，而 nodejs 是客户端，所以说脚手架本质是操作系统的客户端。

它和我们在 pc 上安装的应用本质上是一样的，只是 nodejs 没有 GUI。

• 如何为 node 脚手架创建别名？

新建一个软链接指向 node 脚手架的软链接。

软链接是可以嵌套的！

• 描述脚手架命令执行的全过程。

  1. 用户输入vue create vue-test-app

  2. 在环境变量$PATH中查询Vue命令（相当于执行which vue）

     • 查询失败，输出错误信息
     • 查询成功，寻找实际链接文件

  3. 通过 /usr/bin/env node 执行文件

     • node 命令查询失败，输出错误信息
     • 执行成功