从零开发一个前端工程化脚手架（一）

二次元虎哥
109 阅读2分钟

一、脚手架简介

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

vue create vue-test-app

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

  • 主命令：vue
  • command: create
  • command的params：vue-test-app

它表示创建一个vue项目，项目的名称为vue-test-app，这是一个较为简单的脚手架命令，但实际场景往往更佳复杂，比如： 当前目录已经有文件了，我们需要覆盖当前目录下的文件，强制进行安装vue项目，此时我们就可以输入：

Vue create vue-test-app --force

这里的--force叫做option，用来辅助脚手架确认在特定场景下用户的选择（可以理解为配置）。还有一种场景：

通过vue create创建项目时，会自动执行npm install帮用户安装依赖，如果我们希望使用淘宝源来安装，可以输入命令：

vue create vue-test --force -r registry.npm.taobao.org

这里的-r也叫做option，它与--force不同的是它使用-，并且使用简写，这里的-r也可以替换成--registry，有的人就要问了，为什么我会知道这个命令，其实我们输入下面的命令就可以看到vue create支持的所有options：

image-20230830163022931.png

二、脚手架的执行原理

68747470733a2f2f692e6c6f6c692e6e65742f323032312f30392f32322f6d3941484b55574e795a5374354a422e706e67.png

  • 终端输入 vue create vue-test

  • 终端解析出vue命令

  • 终端在环境变量中找到vue命令（相当于执行 which vue）

    • image-20230830164129728.png

  • 终端根据vue命令链接到实际文件vue.js

    • image-20230830164358249.png

  • 终端利用node执行vue.js

  • vue.js 解析 command/options

  • vue.js 执行 command

  • 执行完毕，退出执行

# 通过以下命令，可以查询指令的路径
➜  / which vue
/usr/local/bin/vue
# 来到bin目录下，可以发现这些都是我们安装的全局依赖
➜  / cd /usr/local/bin/
# 通过 ll 命令
➜  bin ll
# 首字母 l 表示软链接，link的意思，可以看到它实际指向了 ../lib/node_modules/@vue/cli/bin/vue.js 这才是 vue 指令的真身
lrwxr-xr-x  1 lijunjun  admin    39B  3 22 13:32 vue -> ../lib/node_modules/@vue/cli/bin/vue.js

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

这里以 vue-cli 为例

  • 开发npm项目，该项目中应包含一个 bin/vue.js 文件，并将这个项目发布到 npm
  • 将 npm 项目安装到node 的lib/node_modules
  • 在 node 的 bin 目录下配置 vue 软链接指向 lib/node_modules/@vue/cli/bin/vue.js 这样我们在执行vue命令的时候就可以找到vue.js进行执行

四、还有疑问需要解答

  • 为什么全局安装 @vue/cli 后会添加的命令为 vue?
npm install -g @vue/cli
  • 全局安装@vue/cli时发生了什么？
  • 为什么vue指向一个 js 文件，我们却可以通过vue命令去执行它？
avatar
文章
阅读
粉丝