如何发布自己的npm包?如何搭建私有npm仓库?

1,522 阅读4分钟

发布自己的npm包

文中使用的命令及注释合集

npm config get registry // 查看当前npm源
npm login // 登录npm
npm publish // 发布npm包
npm publish --access=public // 发布公共的npm包
npm version patch // 更新当前包版本 v0.0.1 -> v0.0.2

注册npm账号

去npm官网注册即可: www.npmjs.com/

初始化项目

mkdir test-sum
cd test-sum/
sudo npm init
Password:
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test-sum)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/x/Desktop/workspace/test-sum/package.json:

{
  "name": "test-sum",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

创建index.js文件,代码如图:

image.png

export const sum = (a, b) => a + b;

因为使用了export const, 所以我们在package.json增加type: module配置项:

发布npm包

首先查看npm源,检查是否为npm官方源

npm config get registry
https://registry.npmjs.org/  这是npm官方源

终端执行npm login

image.png

按下回车键进入浏览器

image.png

点击Use security key, 等待登录成功, 返回控制台

image.png

现在已经登录成功了。

运行npm publish 发布包(mac用户注意使用sudo):

同样的,这里也需要授权(同登录)。

授权后发现报错:

image.png

这里是有两个原因,一是因为名字重复了,我们给包加一个前缀,避免重复.

修改package.json文件:

image.png

这样我们包名就修改完成了。

第二个原因是我们发布公有的包需要加--access=public 参数。

我们执行sudo npm publish --access=public

image.png

这样就发布成功了!

npm官网中可以查看到:

image.png

我们重新新建一个项目,安装这个项目试试:

cd ..
mkdir test-project
cd test-project
npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (workspace)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/x/Desktop/workspace/package.json:

{
  "name": "workspace",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

运行npm i @bsuooo/test-sum安装我们刚发布的包:

npm i @bsuooo/test-sum

image.png

新建一个js文件测试一下(执行Run Code):

image.png

这样使用也是没有问题的。

更新npm包

更新npm包,我们需要手动修改package.json文件中的version字段,或者直接使用npm version patch 命令:

我现在的包版本是v1.0.1, 执行npm version patch:

image.png

查看package.json文件:

image.png

可以看到version字段已经变为了v1.0.2

我们再为index.js添加一个工具函数:

image.png

运行npm publish --access=public

image.png

同样需要登录验证,和发布时一样。

发布完成后, 我们打开npm官网查看我们的包:

image.png

发现version已经为最新的v1.0.2了。

我们再次回到测试项目中验证:

直接引入isSame报错,因为我们还没有更新包。

image.png

修改package.json文件中 包的版本:

image.png

这里发布的是几版本就改为几版本,然后重新运行npm i:

image.png

然后重新运行我们test.js文件中的代码:

image.png

没有问题,这样我们的更新就完成了。

搭建一个私有的npm

这里我们使用verdaccioverdaccio.org/zh-cn/) 搭建

安装verdaccio

运行npm install -g verdaccio

image.png

安装完成后执行verdaccio启动:

image.png

这样就已经启动成功了(后续操作中不要结束项目),启动后命令行输出的字符中, info --- config file是配置文件存放的位置,http address是我们可以访问的页面地址,我们可以用浏览器访问http://localhost:4873/页面查看:

image.png

在私有仓库发包

回的我们的test-sum包目录, 修改package.json中包名为@bsuooo/test-sum-private

image.png

命令行执行npm adduser --registry http://localhost:4873/添加用户

image.png

然后执行发包命令(mac用户需要sudo)npm publish --registry http://localhost:4873/

image.png

刷新http://localhost:4873/可以看到,我们的包已经发布成功了:

image.png

到我们的test-project中安装这个包:

image.png

安装失败,因为我们的包在我们私有的npm库中。 现在我们需要再指定npm库, 有两种办法,一种是安装时使用npm install @bsuooo/test-sum-private@1.0.2 --registry http://localhost:4873

但是这样的话,需要将package.lock.json文件提交到git, 不然其他人安装时还是找不到安装哪个地址的包。

image.png

还有一种方法是在项目根目录增加npmrc文件,指定仓库地址:

image.png

这样我们再重新安装:

image.png

这样就安装成功了,因为如果安装我们私有仓库中没有的包,verdaccio会自动转发到https://registry.npmjs.org/,这个地址可以在项目启动时输出的info --- config file配置文件中设置:

image.png

这样我们的私有npm仓库就可以了。