前端组件包发布到npm私服

前端组件包发布到npm私服，前端小白亲自实践

---

---

前言

对个人来说，我们写的包往哪儿发布，无非下面三个地方。其中淘宝镜像仓库每隔十分钟会同步一下 Npm 仓库的新模块，所以实际要看的也就是往 Npm 仓库和公司内部搭建的私有 Npm 仓库上如何发布包。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、 仓库概念

1、Npm 仓库
Npm 仓库是一个公共平台，所有人开发的模块想要共享都可以扔上去，有人需要使用什么功能去上面找即可。缺点是服务器架设在国外，国内下载包时速度比较慢。

2、淘宝镜像仓库
淘宝镜像仓库由阿里云赞助，在国内搭设的一套服务器，每隔十分钟从 Npm 仓库上同步一下包，内容可以认为和 Npm 仓库是一样的，所以国内一般都会把下载仓库地址设置为淘宝镜像仓库，这样子下载包时会大大加快速度。

3、公司内部私有 npm 仓库
有的公司内部开发一些私有包不想上传到公共平台 Npm 仓库，于是乎就搭建公司内部的私有 Npm 仓库，与 Npm 仓库其实差不多，只不过有一个是供全世界开发者使用的平台，一个是只供公司内部使用的平台。

现有项目是存在组件私包的，所以要上传到自己公司的私服上去

二、操作步骤

1.Nexus私服部署

Nexus私服部署是我们运维直接搭建的，所以前端小白还是请教运维大佬搭建好我们直接上传前端组件包

添加三个仓库hosted,proxy, group，其中group仓库中中将hosted和proxy拖拽进去。

group 指的是仓库组，可以包括hosted 和proxy的仓库。

hosted 指的是自己的私有仓库，可以上传私有代码到上面。

proxy 指的是代理镜像仓库，比如我们常用的antd，angular等第三方类库。

2.配置package.json

代码如下（示例）：

"publishConfig": {
   "registry": "http://localhost:8081/repository/npm-company/"
 },

registry这个地址应该是自己公司私服上传地址

3.切换源地址

代码如下（示例）：

npm config set @name:registry=http://xxxxxxx/repository/npm-hosted/
npm config set registry http://xxxxxxx/repository/npm-group/

第一个命令是把包名为name的指定去后边地址去拉取，第二个是默认拉取的地址，所以要配置好源地址然后才能打包上传。

4.打包

代码如下（示例）：组件package.json同级目录下

npm pack   打包

将组件打包成tgz

5.登录

npm login   登录（需账号密码）

Username: xxxx
Password:
Email: (this IS public) xxxxx@qq.com

登录运维大佬给的账号和密码还有邮箱

6.发布

npm publish    上传tgz包
npm unpublish --force   删除包

更新包和发布包操作步骤类似，唯一的区别是要修改下 package.json 中的 version 字段，你更新包，总得让包的版本变化一下吧。操作重复上面几步步骤，可以先删除掉再上传。

常见错误

Unable to authenticate, need: BASIC realm=”Sonatype Nexus Repository Manager”

npm ERR! code E401
npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"

出现这个错，一般是源不对，注意上面的package.json里边的registry，其中还有/也不能少

---

参考文档

前端包发布到npm私服
npm 发布包填坑指南

三、总结

以上就是自己公司上传自己私服的前端组件包文件，这样npm管理自己私服的东西，上传之后的包会在Nexus上的browse看到，也有详细的介绍，下载的话就直接npm install项目就可以，也可以指定包名字下载npm install @名字/项目名@版本号 例如：npm install @name/[email protected]

---

以上讲述如有问题，请及时联系！