前端架构: 从vue-cli探究脚手架原理

从使用角度理解什么是脚手架

  • 脚手架本质是一个操作系统的客户端
    • 在终端中去执行一个命令,这个命令本身它就是一个客户端
    • 我们其实可以把脚手架理解为操作系统的一个客户端
    • 通过命令去执行它的时候,这个命令往往是这样的一个构造,如下
  • 比如:要创建一个vue的项目的时候, $ vue create vue-test-app
    • 上面这条命令由3个部分组成
      • 主命令: vue
      • command: create
        • 这个 command 是子命令,实际上它向脚手架(主命令)发送一个请求
        • 这个请求,让我们的脚手架帮我们完成一个动作,完成这个动作,就是create创建项目
      • command的param: vue-test-app
        • 建什么项目呢?看这第三个参数,在command后面,又加了一个空格,输入了一个参数
    • 这个命令输入完以后,脚手架会给我们一定的反馈, 比如说会让我们做一些选择,或者会帮我们执行一些操作等等
    • 它表示创建一个vue项目,项目名称为 vue-test-app
  • 以上是一个较为简单的脚手架命令,但实际场景往往更复杂,比如:
    • 当前目录已经有文件了,我们需要覆盖当前目录下的文件,强制进行安装 vue 项目,此时我们就可以输入
    • $ vue create vue-test-app --force
      • --force 叫做 option, 用来辅助脚手架确认在特定场景下用户的选择(可以理解为配置)
      • 如果加入了 --force,就等于告诉脚手架创建项目的时候,可以强制进行覆盖
      • 如果没加 --force, 那么脚手架的执行就会中断。因为你没有强制覆盖,而我当前又有文件,所以我就会中断
      • 其实 --force 可以理解为 --force true, 简写为:--force-f
  • 还有一种场景, 通过 vue create 创建项目时,会自动执行 npm install 帮用户安装依赖
    • 如果我们使用淘宝源来安装,就可以输入命令 vue create vue-test-app --force -r https://registry.npm.taobao.org
    • 这里的 -r 也是 option, 它与 --force 不同的是它使用 -,并且使用简写
    • 这里 -r 也可替换成 --registry,同时,我们可以通过 vue create --help 来查看其他可用命令
    • -r https://registry.npm.taobao.org 后面的 https://registry.npm.taobao.org 成为 option的param

脚手架原理

  • 我们需要理解输入了 $ vue create vue-test-app 之后,为什么会发生一系列的事情

  • 我们先要理解整个 vue 脚手架的体系,如下图

  • 通过 $ which vue 可看到 /usr/local/bin/vue, 这里的vue其实是一个软连接
    • 参考:vue -> …/…/…/Users/xxx/.config/yarn/global/node_modules/.bin/vue
    • 前面的 vue 其实执行的就是后面路径里的vue命令
  • 程序员在终端中输入 $ vue create vue-test-app
  • 终端解析出 vue 命令
  • 终端在环境变量中找到 vue 命令
  • 终端根据 vue 命令链接到实际文件 vue.js
  • 终端利用 node 执行 vue.js
  • vue.js 解析 commond / options
  • vue.js 执行 commond
  • 执行完毕,退出

从应用角度开发

  • 以 vue-cli 为例开发一个脚手架

    • 比如:/Users/johnny/.config/yarn/global/node_modules/@vue/cli
  • 其目录结构

    LICENSE
    README.md
    bin
    lib
    node_modules
    package.json
    
  • 需要开发一个 npm 项目,该项目中应包含一个 bin/vue.js 文件,并将这个项目发布到 npm

  • 将 npm 项目安装到 node 的 lib/node_modules,或者如: /…/yarn/global/node_modules

  • 在 node 的 bin 目录下配置 vue 软链接指向 lib/node_modules

  • 在执行vue命令的时候,就可以找到 vue.js 进行执行,这样一个板顶关系,在package.json中

    {"bin": {"vue": "bin/vue.js"}
    }
    
  • 这个就是 vue 和 vue.js 之间的绑定关系

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

  • $ npm i -g @vue/cli 全局安装 @vue/cli 时发生了什么?

    • 在安装时,会把当前npm包下载到 lib/node_modules
      • 或者如: /…/yarn/global/node_modules 下
    • 之后解析 package.json 中的 bin 属性
    • 创建一个软连接 /usr/local/bin/vue 指向 /../yarn/global/node_modules/@vue/cli/bin/vue.js
  • 执行vue命令时,发生了什么?为何 vue 指向了 js 文件,却可以通过 vue 命令执行它

    • 操作系统,会根据 $ which vue 中的 vue 路径找到 vue执行文件,如果 vue 命令不存在,会报出 command not found 的提示
    • 这个vue执行路径其实是一个软链接,通过这个软连接找到真实的 vue地址,对应的就是 上述 /…/bin/vue.js
    • 这个 vue.js 是一个 js文件,即使有执行权限,也不可直接执行,需要一个 node 的解释器,就是类似 node /…/bin/vue.js
    • 但是很明显,在执行vue命令时,并没有冠以 node 的前缀,直接进入 /…/yarn/global/node_modules/@vue/cli/bin/vue.js
    • 可看到,最顶部有一个声明 #!/usr/bin/env node 这个声明可以直接让 xx.js 文件直接在操作系统执行
    • 意思是,告诉操作系统,在直接调用这个文件的时候,到环境变量中去找 node 命令,类似的,如果是个python文件,将node修改成 python
    • /usr/bin/env 会列出所有环境变量,在这个环境变量列表中找到 node 命令
    • 通过 node 命令来执行这个 js 文件
    • 因此,任何js文件,只要在文件顶部加上这个声明,即可 直接执行 (这里限制在 unix 系统)
    • 此时, ./xx.js 等价于 node xx.js
    • 注意,#!/usr/bin/env node 这样写的好处是
      • 无需关注每一个电脑环境下的node路径
      • 这个也可替换成具体的node路径也是一样的,但是会非常的麻烦,而且换个环境可能就不能用了
      • 所以,还是采用这种方式来处理
  • 现在我们想要用 mycommand (这个是我们自定义脚手架随意举例) 指向 xx.js,就可以通过创建软链接的方式来处理

    • 进入到 /usr/local/bin 目录
    • 创建软链接 $ ln -s /../xx.js mycommand
      • 注意,这里的 /…/xx.js 是当前脚本的路径,替换成自己的即可
    • 可看到当前目录下有一个 imooc 的文件
    • 此时,在系统内任意位置,只需要执行 mycommand 即可运行 xx.js
  • 这个就是我们自定义的脚手架 mycommand 的基本设定

最后,描述一下脚手架命令执行的一个整个过程

脚手架的本质是操作系统上的一个客户端

  • 可以发现脚手架执行起来的过程和前端开发的应用是非常不一样的
  • 其实它和web应用从本质上来讲,没有关系
  • 它们的联系仅仅是脚手架和开发的web应用都是通过 js 这个语言来进行编写的
  • 但其实脚手架它其实是操作系统当中的一种机制
  • 执行脚手架的时候,它其实是被作为一个操作系统上的可执行文件来进行执行的
  • 所以可以说我们开发的脚手架就是操作系统上的一个客户端
  • 我们的脚手架它本质执行起来时候,是依靠 node 这个命令
  • node 是一个操作系统客户端,而我们的 xx.js 仅仅是node的一个参数
  • 换句话说,仅仅是把一个参数注到 node 当中,类似的可以这样 node -e console.log(1) 这样也可以执行
  • 也就是说脚手架是操作系统的客户端,其本质并不是说 xx.js 是一个客户端,而是node本身它是一个客户端
  • 在windows中,node 是 node.exe
  • 在mac中,node 是 node* (*代表可执行文件)
  • 当去执行 node xx.js 的时候,其实是把 xx.js 中的代码变成一个字符串传入到node中
  • 然后 node 对这些字符串进行解析,把它当成一个可执行程序进行执行
  • 这些逻辑全部是预设好的,预设好的逻辑就存放在这个node的可执行文件当中
  • 所以脚手架是客户端,其本质是因为node本身就是客户端

脚手架和在PC上面安装的其他应用或者软件的区别

  • 本质来说没有区别,在操作系统上安装了软件,windows上都是 exe 后缀?
  • 在 macos 上面都是可执行文件,所以本质没有区别
  • 它们的区别仅仅是安装的一些软件会提供一个GUI,像当前终端一样,它会提供一个GUI
  • 而我们的 node 并没有提供 GUI
  • 我们的node是直接通过命令行的方式传入参数来进行执行,仅仅是这样的一个差别
  • 如果想在 nodejs 当中去展示GUI有可能吗?
    • 完全可能我们只需要去调用操作系统的GUI绘制API就可以绘制出窗口来
    • 所以脚手架本质它其实就是个客户端。但注意, 不是我们编写的代码是客户端,而是node本身是客户端

为 node 脚手架创建别名

  • 方式 1,就是通过编写一个软链接,其本身会链接到我们自己编写的一个代码文件上
  • 方式 2,现在继续想给 mycommand 添加一个别名或者对其进行修改
    • 进入到 /usr/local/bin 目录
    • 执行 ln -s ./mycommand mycommand1 这样就可以通过 mycommand1 来执行
  • 可见,软链接是可以嵌套的,基于此可以给当前脚手架起别名

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/459224.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图像处理入门:OpenCV的基础用法解析

图像处理入门:OpenCV的基础用法解析 引言OpenCV的初步了解深入理解OpenCV:计算机视觉的开源解决方案什么是OpenCV?OpenCV的主要功能1. 图像处理2. 图像分析3. 结构分析和形状描述4. 动态分析5. 三维重建6. 机器学习7. 目标检测 OpenCV的应用场…

车载测试Vector工具CANape——常见问题汇总(下)

车载测试Vector工具CANape——常见问题汇总(下) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何 消耗你的人和事,多看…

路由器如何映射端口映射?

在现代互联网中,随着网络应用的不断发展,很多用户需要进行远程访问或搭建服务器来满足自己的需求。由于网络安全的原因,直接将内网设备暴露在公网中是非常危险的。为了解决这个问题,路由器映射端口映射技术应运而生。本文将介绍什…

FPGA_ip_pll

常使用插件管理器进行ip核的配置,ip核分为计算,存储,输入输出,视频图像处理,接口,调试等。 一 pll ip核简介 pll 即锁相环,可以对输入到fpga的时钟信号,进行分频,倍频&…

Asp .Net Core 系列:Asp .Net Core 集成 NLog

简介 NLog是一个基于.NET平台编写的日志记录类库,它可以在应用程序中添加跟踪调试代码,以便在开发、测试和生产环境中对程序进行监控和故障排除。NLog具有简单、灵活和易于配置的特点,支持在任何一种.NET语言中输出带有上下文的调试诊断信息…

(力扣)1314.矩阵区域和

给你一个 m x n 的矩阵 mat 和一个整数 k &#xff0c;请你返回一个矩阵 answer &#xff0c;其中每个 answer[i][j] 是所有满足下述条件的元素 mat[r][c] 的和&#xff1a; i - k < r < i k, j - k < c < j k 且(r, c) 在矩阵内。 示例 1&#xff1a; 输入&a…

c++多态(1) -- 子类型及什么是多态

目录 代码分析: 代码中我们使用了三种方式: 为什么子类对象可以赋值给父类对象? 子类型的传递性: 使用父类的指针指向子类的对象: 总结: 子类型和多态的联系及什么是多态 那父类指针指向子类对象的用处在哪? 子类型: 从名字看就知道和继承有关。 子类型…

mac电脑上使用android studio创建flutter项目

mac电脑环境配置可以看这篇文章&#xff1a;https://xiaoshen.blog.csdn.net/article/details/136068650 配置玩环境之后&#xff0c;开始创建第一个flutter项目&#xff1a;点击new flutter project或者new project都可以 然后选择flutter&#xff1a; 并将sdk配置为解压后的…

xss 盲打使用

使用beef等内网xss平台&#xff0c;或外网xss平台&#xff08;XSS平台-仅用于xss安全测试专用、XSS平台 - &#xff08;支持http/https&#xff09;XSS Platform&#xff09; 将生成的js脚本写到网站的留言框处&#xff0c;但对应的用户(尤其是admin)查看留言&#xff0c;就会…

蓝桥杯每日一解

可以看看a的ascii码为6532 而A为ascii码为65&#xff0c;大小写相差32位 #include <iostream>using namespace std; int main(){int n;cin >> n;char a;for (int i 1;i<n;i){while(scanf("%c",&a) ! EOF){//无限输入直到输入到空格if(a a || a …

ubuntu远程桌面配置以及常见问题

ubuntu桌面系统配置 ubuntu远程桌面配置如下 第一步&#xff0c;安装xrdp sudo apt-get isntall xrdp安装完检查一下服务是否可以正常启动&#xff0c; sudo systemctl status xrdp如果看到active应该就正常启动了 第二步&#xff0c;开启Ubuntu桌面共享 好接下来我们测试一…

Windows 安装 MySQL 最新最简教程

Windows 安装 MySQL 最新最简教程 官网地址 https://dev.mysql.com/downloads/mysql/下载 MySQL zip 文件 配置 MySQL1、解压文件 2、进入 bin 目录 搜索栏输入 cmd 回车进入命令行 C:\Users\zhong\Desktop\MySQL\mysql-8.3.0-winx64\mysql-8.3.0-winx64\bin 注意这里是你自己…