理解脚手架

58 阅读2分钟

1、从使用者的角度理解脚手架

脚手架简介

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

vue create vue-test-app 

上面的命令由三个部分组成

  • 主命令:vue

  • command:create

  • command的params:vue-test-app

他表示创建一个vue的项目,项目名称为vue-test-app,以上是一个较为简单的脚手架命令,但实际场景往往更加复杂,比如:

单签文件夹已经有文件了,我们需要覆盖当前目录下的文件,强制进行安装vue项目,此时我们就可以输入:

vue create vute-test-app --force

2、脚手架执行原理

脚手架执行原理如下

  • 在终端输入vue create project

  • 终端解析出vue

  • 在环境变量中找到vue命令

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

  • 终端利用node执行vue.js文件

  • vue.js解析command或者params

  • vue.js执行command

  • 执行完毕,退出执行

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

这里以vue-cli为例🌰:

  • 开发npm项目,该项目包含一个bin/vue.js文件,并将这个项目发布到npm

  • npm项目安装到nodelib/node_modules

  • nodebin目录下配置vue的软连接指向lib/node_modules/@vue/cli/bin/vue.js

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

疑问解答

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

npm install -g @vue/cli

答:在/usr/local/lib/node_modules/@vue/cli文件夹下的package.json

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

这个软连接的名称就是vue,所以添加后的命令为vue

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

先把@vue/cli下载到/usr/local/lib/node_modules中,然后根据@vue/cli下的package.json,根据bin中定义去/usr/local/bin/下去定义@vue/cli的软链接vue

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

1.终端先在环境变量中找vue指令(相当于 which vue命令),看有木有被注册,未注册则返回command not found,注册了则去找vue指令的软连接指向地址/usr/local/lib/node_modules/@vue/cli/bin/vue.js,去执行vue.js文件中的代码

2.因为这个文件js文件的顶部写了#!/usr/bin/env node标识,故在环境变量中查找node,告诉系统使用node去执行这个js文件。