既然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

相关推荐
To_OC9 分钟前
万字解析《JS 语言精粹》之第五章:继承 5 大核心精髓(JS 原型核心)
前端·javascript·代码规范
时光足迹21 分钟前
极光推送全攻略(上):被iOS证书折磨了三天,我写了一份前端也能看懂的避坑指南
前端·ios·uni-app
DyLatte25 分钟前
AI 时代,最危险的不是被替代,而是努力不沉淀
前端·后端·程序员
mCell1 小时前
【锐评】桌面端技术营销:别拿跑分当工程判断
前端·rust·electron
柒和远方1 小时前
从一次工程审查看 AI 学习产品的边界兜底:RAG 资料链路一致性实战
前端·后端·架构
疯狂的魔鬼1 小时前
一个"懂分寸"的文本省略组件是怎样炼成的
前端·vue.js·设计
angerdream1 小时前
手把手编写儿童手机远程监控App之vue3 AI Gent
前端
李明卫杭州1 小时前
CSS BFC 完全指南:从原理到实战,彻底搞懂这个"结界"
前端
Momo__1 小时前
MDN MCP Server——Mozilla 把 Web 文档接进 AI Agent,从此 LLM 不再瞎编 API
前端·ai编程·mcp
妙码生花1 小时前
现代前端的极致性能 icon 加载方案(死磕成功版)
前端·vue.js·typescript