pnpm 如何调试自己本地的包(npm link, npm install ./package)

当你开发一个npm包想要调试它的时候， 如果一次次的发布到npm仓库，然后安装调试，这样就很麻烦， 我们可以通过npm link 来进行本地调试

目录结构

image.png

example 文件夹为演示目录
除example 之外是npm包

npm link 使用

  • npm link，进行全局link
  • npm link 模块名(package.json中的name)
  • npm unlink 模块名
  • npm config get prefix 获取默认安装目录

npm link 实例

// cd到需要创建npm包的目录

npm link // 进行全局link

cd example 

npm link 模块名 (package.json中的name)

成功后 example 的node_modules 下会出现 对应的软链接包

问题

  1. 查看npm link 软连接是否建立成功
 npm config get prefix  // 获取默认安装目录

获取默认安装目录 - 进入node_modules 文件夹-查看是否有你的项目包

  1. Failed to resolve entry for package "burypoint-vue"
npm link 后 报错 
Error:   Failed to scan for dependencies from entries:
  D:/xhl/burypoint-vue/example/vue3/index.html

  X [ERROR] Failed to resolve entry for package "burypoint-vue". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

    node_modules/esbuild/lib/main.js:1227:21:
      1227 │         let result = await callback({

这个是因为打包插件的模式(commonJS ESM)和 使用方不匹配 修改package.json 的入口点配置

{
  "name": "burypoint-vue",
  "version": "1.0.0",
  "main": "dist/burypoint-vue.cjs.js", // CommonJS 入口
  "module": "dist/burypoint-vue.esm.js", // ES 模块入口
  "exports": {
    "./dist/burypoint-vue.cjs.js": "./dist/burypoint-vue.cjs.js",
    "./dist/burypoint-vue.esm.js": "./dist/burypoint-vue.esm.js"
  },
  "files": [
    "dist/"
  ]
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容