使用Sinopia搭建私有npm仓库不能下载带有@符号的包

前言

这篇文章主要记录自己在项目中搭建好npm仓库后遇到的坑，并不是讲如何搭建私有npm仓库

1、为什么要搭建私有npm仓库？

并非每一个公司都需要搭建私有npm仓库来管理代码，这个要视公司需求而定，由于我司的产品面向的客户很多，而不同的客户对这个产品的功能要求不一，打个比方：我公司现在开发了A,B,C三个模块，而客户一的产品只需要A,B模块，客户二的产品只需要A,C模块，客户C的产品只需要B,C模块，客户D的产品需要A,B,C模块，这就是我司的场景。当然你可以说你选择拷贝代码就行了，何必搞这么麻烦，那么当我没说，其实实现业务模块的打包非常明显的好处就是，我可以写一套脚本帮我下载产品所需要的包，然后组合在一起打包发布，就成了一个新的产品，这就是自动化的好处。然后就是基于这个技术栈的项目可能有多个，所以有一些组件是可以共用的，所以我司计划自己封装一些市面上没有的组件，然后组成一个组件库，给公司的多个项目使用，然后公网上有的包就去公网上下载就行了

2、如何搭建私有npm仓库？

由于本文并不是介绍如何搭建私有npm仓库的文章，关于如何搭建私有npm仓库请访问该链接->如何搭建私有npm仓库 ,关于如何搭建私有npm仓库，那篇文章已经讲解的非常清晰了，这里只提一点就是，私有npm仓库是可以配置代理的公有仓库地址的，解释详细点就是：你的私有仓库里没有的npm包，它就会去你配置的代理地址找npm包。代理仓库的地址可以在 config.yaml配置文件 里面 uplinks:npmjs:url:http://registry.npm.taobao.org/ 进行配置，详细请参考上面的如何搭建私有npm仓库链接的文章

3、搭建好私有npm仓库后遇到什么坑？

我发现使用nrm切换到私有npm仓库对应的源后，下载带@ 符号的包都下载失败，比如下载 @angular/core，就会下载失败，这是为什么呢，查阅了一些资料，发现这其实是Sinopia自己的bug，bug产生的原因就是：sinopia在代理到npmjs.org公有库时将@符号转码为%40，致使在公有库中找不到对应的包，返回404 ，简单点说就是 @angular/core 代理请求的时候被转换成了 %40angular/core，所以我们需要在代理请求发出之前将其转回 @angular/core

4、如何解决？

修改sinopia源码：修改位于sinopia/lib/up-storage.js文件第10行：将var encode = encodeURIComponen;，更改为：var encode = function(thing) {return encodeURIComponent(thing).replace(/^%40/, '@');}; ,这段代码的含义就是将%40转回@，于是就解决了不能下载带有@符号的npm包的bug

5、更好的解决方案？

由于sinopia的作者已于二年前停止对sinopia的维护和升级，所以出来了一个sinopia的fork，名字叫做Verdaccio，然后由Verdaccio继续对sinopia进行更新和维护，具体如何使用Verdaccio来构建私有npm服务器，请见Verdaccio的github介绍