Failed to resolve entry for package "js-demo-tools". The package may have ......

背景:在我自己开发的npm包,上传到了npm之后,测试的时候使用vite框架进行导入这个包报的错误

json 复制代码
{
  "name": "xxx-demo",
  "version": "1.0.0",
  "description": "this is learn npm package",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "rollup -c"
  },
  "files": [
    "/dist"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.14.0",
  "devDependencies": {
    "rollup": "^4.46.4",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.36.0"
  }
}
  1. main 字段指向错误"main": "index.js" 指向根目录的 index.js,但我的 files 配置只包含 /dist 文件夹,所以发布到 npm 的包中根本没有根目录的 index.js文件。

  2. 缺少 ES 模块入口配置 :虽然你设置了 "type": "module",但没有配置 module 字段或现代的 exports 字段来指定 ES 模块的入口点。

  3. Vite 无法找到正确的入口:Vite 作为现代构建工具,优先查找 ES 模块入口,但你的配置没有提供正确的路径。

推荐 直接使用 exports 字段

json 复制代码
{
  "name": "xxx-demo",
  "version": "1.0.0",
  "description": "this is learn npm package",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "rollup -c"
  },
  "files": [
    "/dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.14.0",
  "devDependencies": {
    "rollup": "^4.46.4",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.36.0"
  }
}

为什么推荐呢?

  1. 现代标准exports 字段是 Node.js 和现代打包工具的标准
  2. 明确的入口点:清楚地指定了不同模块系统的入口
  3. 更好的兼容性:同时支持 ES 模块和 CommonJS
  4. Vite 友好 :Vite 会优先查找 exports.import 字段
相关推荐
majingming12327 分钟前
FUNCTION
java·前端·javascript
A_nanda1 小时前
Vue项目升级
前端·vue3·vue2
SuperEugene1 小时前
Axios 接口请求规范实战:请求参数 / 响应处理 / 异常兜底,避坑中后台 API 调用混乱|API 与异步请求规范篇
开发语言·前端·javascript·vue.js·前端框架·axios
abigale032 小时前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程:从基础上传到断点续传
前端·typescript·文件上传·vue cli
Setsuna_F_Seiei2 小时前
AI 对话应用之页面滚动交互的实现
前端·javascript·ai编程
新缸中之脑3 小时前
追踪来自Agent的Web 流量
前端
wefly20173 小时前
从使用到原理,深度解析m3u8live.cn—— 基于 HLS.js 的 M3U8 在线播放器实现
java·开发语言·前端·javascript·ecmascript·php·m3u8
英俊潇洒美少年4 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
kyriewen114 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
英俊潇洒美少年4 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js