脚手架学习

1、为什么全局安装 @vue/cli 后,执行 vue create xxx 命令就能运行?

npm 会将包安装在全局 node_modules 目录中,执行命令时,系统会在 PATH 环境变量列出的目录中查找 vue 可执行文件,这个文件通常位于 @vue/cli/bin/vue.js

@vue/cli 包的 package.json 中定义了安装时能自动创建命令的链接

javascript 复制代码
"bin": {
  "vue": "bin/vue.js"
}

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

1、终端首先会在系统的 PATH 环境变量中查找名为 vue 的可执行文件,通过 where vue 命令可以看到;

2、 js 文件能够直接执行是因为文件顶部有 shebang 声明,告诉系统用 node 解释器来执行此脚本

javascript 复制代码
#!/usr/bin/env node

3、当通过 npm 全局安装 @vue/cli 时,npm 会做两件事:1、将包安装到全局 node_modules;

2、在系统的 bin 目录创建软链接指向这个 js 文件

3、脚手架开发流程

创建 npm 项目,创建脚手架入口文件,最上方添加:

javascript 复制代码
#!/usr/bin/env node

配置 package.json,添加 bin 属性

编写脚手架代码,将脚手架发布到 npm

4、脚手架开发难点

1、如何将脚手架的逻辑会拆分为若干个简单的模块

2、如何注册命令,并将注册的命令执行到对应的方法上:vue create、vue add、vue invoke

3、如何设计参数解析( vue command options <params>)、帮助文档、命令行交互、日志打印、命令行文字变色、网络通信、文件处理等

5、脚手架本地link标准流程

1、链接本地脚手架:

bash 复制代码
cd your-lib
npm link
cd your-cli
npm link your-lib

npm link 会把 your-lib 链接到 node 下 node_modules 中,然后 your-cli 就可以连接了

2、取消连接本地库文件

bash 复制代码
cd your-lib
npm unlink
cd your-cli
npm unlink your-lib

npm link:将当前项目链接到 node 全局 node_modules 中作为一个库文件,并解析 bin 配置创建可执行文件

npm link your-lib:将当前项目链接到 node 全局 node_moudles 中作为一个库文件,并解析配置创建可执行文件

npm unlink:将当前项目从 node 全局 node_moudles 中移除

npm unlink your-lib:将 your-lib 文件从当前项目中移除

相关推荐
似的83510 小时前
一步一步学习使用FireMonkey动画() 使用TAnimator类创建动画
linux·学习·nginx
郭老二10 小时前
【前端】vue3:编译步骤
前端
fanged10 小时前
总线学习3--SPI番外(TODO)
学习
不在逃避q10 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁11 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One98511 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易11 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
ThsPool12 小时前
【遥感学习整理 02】ENVI遥感图像处理基础:从数据读取到遥感信息产品
图像处理·人工智能·学习
新中地GIS开发老师12 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户0595401744612 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css