脚手架的实现原理

77 阅读2分钟

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

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

npm install -g @vue/cli

这是因为 @vue/cli 包的结构npm 的安装机制共同作用的结果

包的 bin 字段:在 @vue/cli 包的 package.json 文件中,有一个 bin 字段。这个字段指定了包提供的可执行文件及其对应的命令名称。例如,@vue/cli 的 package.json 包含如下配置:

这表示 @vue/cli 提供了一个名为 vue 的命令,对应的可执行文件是 bin/vue.js

npm 的安装机制:当你使用 npm install -g @vue/cli 全局安装 @vue/cli 时,npm 会读取包的 package.json 文件中的 bin 字段,并在全局 node_modules/.bin 目录中创建一个符号链接(symlink),指向 @vue/cli 包中的 bin/vue.js 文件。这个符号链接的名称就是 bin 字段中指定的命令名称,即 vue

PATH 环境变量:npm 还会将全局 node_modules/.bin 目录添加到系统的 PATH 环境变量中。这样,当你在终端中输入 vue 命令时,系统会在 PATH 中列出的目录中查找这个命令,并执行找到的可执行文件。由于全局 node_modules/.bin 目录在 PATH 中,系统可以找到并执行 vue 命令

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

  1. 执行 vue 命令会执行 PATH 环境变量 node_modules/.bin 目录下创建的软链接对应的可执行文件,在命令提示符中输入命令where vue可找到 vue 命令的软链接地址
  2. js 文件无法在命令行直接执行,但是可以在 node 环境中执行,比如node test.js指令表示在 node 环境中执行 test.js 。而这个 vue.js 做了特殊处理,即:文件开头添加了#!/usr/bin/env node,告诉系统在执行这个文件的时候,找 node 环境变量,通过 node 命令执行

脚手架原理进阶

  • 为什么说脚手架本质是操作系统的客户端?
    • 因为 node 是操作系统的客户端,脚手架就是 node 去执行js代码
  • 如何为 node 脚手架命令创建别名?
    • 通过嵌套软链接的方式创建别名