如何开发自己的npm依赖包,开发-本地调试-打包发布到自己的镜像库

开发自己的npm依赖包

如果是开发一个全新的依赖

  1. 新建文件夹如custom(后面都使用custom表示此开发得的依赖)
  2. 执行npm init 初始化项目
  3. 在pacakge.json中定义当前开发依赖包的name和version,如不需要添加命名空间name直接为包名即可。
    在这里插入图片描述4. 业务及逻辑开发

本地调试

依赖开发过程中可以在其他本地项目中(后面使用A表示)使用调试,以查看实时效果

  1. 在custom根目录下执行命令:
npm link

在这里插入图片描述

  1. 在A的根目录下执行
npm link Pname

其中Pname就是custom依赖的名称,即package.json中的name字段
在这里插入图片描述

  1. 检查A项目是否已经连接到了custom
    在A的node_modules文件夹下查看是否有custom依赖包
    在这里插入图片描述
    4.A连接上custom后就可以通过引入node_modules中的依赖的方式引用custom进行测试,custom本地修改后,A项目中也会实时更新。
    在这里插入图片描述

打包:

  1. 添加webpack.config.js文件
    如果不想暴露源码,可以先通过webpack打包后提供打包后的文件。
  2. 检查项目package.json的name和version,这将作为包的名称和版本
    在这里插入图片描述
  3. 根据实际情况配置package.json中的main(入口文件)等字段
    在这里插入图片描述

4.发布:
4.1 可以通过打包当前package为tgz文件,然后手动上传到自己的镜像库地址。步骤如下
执行打包命令:

npm pack

执行完后会在项目根目录下生成一个[packagename].tgz压缩文件
我使用的是公司的Nexus Repository,将刚刚打包的文件上传到对应目录即可。
在这里插入图片描述
4.2 也可以通过npm命令上传:
4.2.1 在package.json中增加publishConfig配置,registry就是镜像库的地址
在这里插入图片描述
4.2.2 登录仓库
执行npm login 登录当前的仓库地址。
根据提示输入:用户名、密码、邮箱
注意:如果是在全局执行的npm login 要设置npm 的仓库地址为当前要上传包的地址,如果在项目根目录下执行,可以配置npmrc文件的registry值为要上传的仓库地址。
如:我们想发布npm包到npm官网,但我们通常会设置npm的仓库地址为镜像地址,此时执行npm login就会报错,必须将npm 的registry地址设置为npm源地址。
在这里插入图片描述

4.2.3 发布
在项目根目录下执行npm publish
在这里插入图片描述
4.2.4 npm publish时如果确定已经登录了但是还是报错

npm ERR! need auth This command requires you to be logged in to http://myrepository/my-release/
npm ERR! need auth You need to authorize this machine using npm adduser
在这里插入图片描述
解决:
把package.json中publishConfig配置registry的地址最后的/删掉,即最后不要以/结尾

补充:给依赖添加命名空间

如果希望打包的文件具有命名空间如@vue,只需修改pacakge.json的name,在前面加上命名空间,再执行步骤2的打包命令。生成的打包文件名就为test-tiny-ui-framework.tgz
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值