既然npm run dev执行了vite命令,那我为何不直接输入vite?

问题背景

我成功地把代码模板推给了团队:Ctrl ACV工程师的提效之路------plop自动生成代码

队友在用的时候,按照我文档里写的,在执行plop命令的时候报错了,提示没有这个命令。针对这个问题,我做了一些探索。

首先新开一个文件夹,在这里运行命令去查询plop安装的版本:

bash 复制代码
plop -v
4.0.0

既然这个命令没报错,说明plop这个是全局可用的,查找node的安装目录AppData\Roaming\npm,果然发现了这个命令。因为我的plop用npm install =g plop安装过,所以不会报错,但是别人没有全局安装。

问题的解决方案之一就是让队友全局安装。

但是我们项目也本地安装了plop,难道这个是不生效的吗?

我在我的本地项目中查询plop安装的版本:

bash 复制代码
plop -v
CLI version 4.0.0
Local version 4.0.1

发现有一个Local version 4.0.1,这个就是我们在执行npm install plop -D的时候安装的(package-lock.json中能看出来)。

无独有偶,我发现项目的启动命令npm run devvite也是有同样的问题:

vbnet 复制代码
dev: 'vite'

npm run dev实际上是执行了vite,为什么我们要这样写?运行项目的直接输入vite不是更省力吗?

如果我直接输入vite,也会有报错,提示命令不存在。

npm run dev确实执行了vite,但是这里的vite命令,并不是直接在全局环境下去找,而是在node_modulesbin目录下去寻找执行语句,bin目录又指向了node_modules/vite/bin

过程梳理

  1. 在发布npm包的时候,package.json中可以定义bin,指向一个执行文件,在执行npm install的时候,自动在node_modulesbin目录下新增可执行文件。

  2. 在执行npm run XXX的时候,首先是去node_modulesbin目录下寻找是否有该命令,如果有的话,根据该命令,定位到执行文件,然后往下执行;如果找不到,就去node的全局环境找命令;再找不到,就会报错。

最终处理方案

package.json中新增一个scripts,

json 复制代码
{
    "scripts": {
        "create": "plop",
    }
}

使用方法:

shell 复制代码
npm run create [XXX] [XXX]

这样就不用全局安装plop了。

自己发布npm包时如何配置命令?

需要在package.json中定义bin

相关推荐
若年封尘9 分钟前
告别手写 API 类型:用 openapi-fetch 打造类型安全的前端接口层
前端·安全·openapi-fetch
cypking14 分钟前
二次封装ElementUI日期范围组件:打造带限制规则的Vue2 v-model响应式通用组件
前端·javascript·elementui
A923A15 分钟前
【小兔鲜电商前台 | 项目笔记】第二天
前端·vue.js·笔记·项目·小兔鲜
牧码岛15 分钟前
Web前端之样式中的light-dark函数,从媒体查询到颜色函数,从颜色到图片,light-dark打开CSS新时代、主题切换的暗黑模式到image的正解
前端·css·web·web前端
酉鬼女又兒28 分钟前
零基础快速入门前端蓝桥杯Web考点深度解析:var、let、const与事件绑定实战(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6·html5
宁雨桥39 分钟前
前端项目实现光暗主题切换的完整方案
前端
happymaker06261 小时前
vue指令扩展以及监视器的使用
前端·javascript·vue.js
一只小阿乐1 小时前
vue前端处理流式数据
前端·javascript·ai·大模型·全栈开发·agentai
问道飞鱼1 小时前
【技术方案】面向 Web 系统的《全栈灰度部署方案设计》
前端·全栈·灰度发布
꧁꫞꯭零꯭点꯭꫞꧂1 小时前
前端面试题3
开发语言·前端·javascript