npm包发布及npm link调试

最新推荐文章于 2025-02-20 09:14:55 发布

祥哥的说

最新推荐文章于 2025-02-20 09:14:55 发布

阅读量1.7k

点赞数

分类专栏： npm 文章标签： npm 前端 node.js npm link npm publish

本文链接：https://blog.csdn.net/qq_39207948/article/details/120979327

版权

npm 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何开发和发布npm包，包括创建package.json，编写入口文件，测试及发布过程中的问题解决。此外，还详细阐述了npm包的本地联调方法，通过npmlink实现快速迭代和调试，避免反复发布和引入的繁琐步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、npm包开发及发布

1、新建文件夹helloDemo，在该文件路径下npm init，一路回车即可，具体的包名等信息，可以在生成的package.json中进行修改。
2、目录结构如下：

index.js：入口
package.json，package-lock.json：包信息
readme.md文档
test-formatter.js：测试文件

（1）index.js文件：

  let formatter = {
    helloName (name) {
        return `hello--coder--${name}`
    }
  }
  module.exports = formatter

（2）在test-formatter.js文件中，引入index.js包内容，node test-formatter.js进行测试
在这里插入图片描述
(3) npm login输入账号，密码，邮箱，登录npm

登录遇到的问题：在taobao源下发布提示没有权限，切换到npm源即可

(4) npm publish 发布npm包
在这里插入图片描述
npm个人包管理中可以看到最新的包：

发布遇到的问题：发布403错误提示
如果是首次发包，那么可能和npm线上包重名了，到package.json中修改包名，再次发布
如果再次发布，那么需求更新版本号，否则上传会提示版本403错误

二、npm包本地联调

项目工程：my-useProject，在该项目中如何调试开发的szx_hellodemo包？
每次改动发布，再引入使用看效果，费时费力；最好的方法通过npm link直接链接开发的npm包
原理：通过将开发的npm包，链接到全局下，在项目中在指定该包链接，即给开发包找一个层级高的地方存放，需要使用时链过来

（1）在helloDemo路径下，执行npm link指令，npm link 操作会在全局 node_modules 目录（如 MacOS 默认的是 /usr/local/lib/node_modules）下创建一个 szx_hellodemo的超链接。

无权限时，加sudo

在这里插入图片描述
(2) 在项目工程中，执行npm link szx_hellodemo, 将npm包链接到该工程中的node_module中

（3）项目中具体使用

const formatter = require('szx_hellodemo'); // 导入
    const onSave = useCallback(saveFlag => () => {
        console.log(formatter.helloName('zhangsan'));
        const {validateFieldsAndScroll} = form;

在这里插入图片描述

(4) 此时，修改完npm包内容，保存之后，在项目中使用时，可以看到就是最新的包内容

  let formatter = {
    helloName (name) {
        return `hello--goodCoder--${name}`
    }

  }
  module.exports = formatter

在这里插入图片描述