使用unpkg读取我们私有库的包unpkg什么是unpkg？它是一个常见的前端公共CDN。它使用URL语法来完成只能在其他人的Web界面中实现的功能。效果简洁大方，在流行的类库和框架文档中经常可以看到。部署在cloudflare上，大陆访问香港节点。它支持h/2和许多新特性。如果不考虑网络延迟的原因，性能优化更好。中国的一些互联网公司也有镜像，比如知乎、饿了么。它可以通过如下URL以快速简便的方式提供任何包、任何文件：unpkg.com/:package@:version/:file如何使用unpkgunpkg.com/react@^16/umd/react。生产。min.jsunpkg.com/d3比如我在npm上发布了一个组件react-signature-phone，我可以这样访问：unpkg.com/react-signature-phone：也可以使用@latest访问最新版本：unpkg.com/react-signature-phone@latest在url末尾加斜杠可以查看一个包中所有文件的列表：unpkg.com/react-signature-phone/:最重要的是我们可以访问npm上package中的html页面：以飞冰的block@icedesign/empty-content-block为例；访问https://unpkg.com/browse/@icedesign/empty-content-block/，可以看到发布到npm后的目录如下：打开package.json文件，可以发现在发布block的时候，会包含以下内容："files":["src/","build/","screenshot.png"],screenshot.png为区块预览图，飞冰平台src使用的图片预览为sourcecodelocationbuild是block打包后的静态页面和资源。可以直接通过unpkg运行这个页面：直接点击index.html，unpkg会直接打开文件读取源码，??然后浏览器的路径是这样的：https://unpkg.com/browse/@icedesign/empty-content-block@3.0.0/build/index.html，删除路径中的browse/，即可直接访问该页面。https://unpkg.com/@icedesign/empty-content-block/build/index.htmlunpkg无法直接读取私有库中的包，所以我们需要搭建本地的unpkg服务器；搭建本地unpkg服务，从github上拉取unpkg源码$gitclonehttps://github.com/mjackson/unpkg.git#安装依赖$npmior$yarn添加启动命令package.json的脚本：“scripts”：{“build”：“rollup-c”，...“watch”：“rollup-c-w”，“start”：“setNODE_ENV=production&&nodeserver.js”}，执行编译命令：$npmrunbuild命令会在运行根目录下生成server.js文件；启动服务：$npmrunstart查看服务是否启动：测试是否有效：打开http://localhost:8080/查看我们自己的unpkg：访问@icedesign/empty-content-block测试：http:///localhost:8080/browse/@icedesign/empty-content-block@3.0.0/：我们自己搭建的unpkg可以正常使用，但是目前我们的私有库npm包还是访问不了，记下来添加私有库支持;unpkg增加私有库支持，新建npmConfig.js根目录，用于存放私有库包的命名空间：//存放私有库包的命名空间exportconstscopes=['@xianzou','@lijq'];/*****私有库地址，代理端口会解析url的端口号*constprivateNpmRegistryURLArr=privateNpmRegistryURL.split(":");*constprivateNpmPort=privateNpmRegistryURLArr[privateNpmRegistryURLArr.length-1]*拉一些npm的打包会返回302，但是unpkg暂时没有处理。会不会跟本地npm源有关？***/exportconstprivateNpmRegistryURL='http://192.168.0.77:7788';//互联网npm地址exportconstpublicNpmRegistryURL='http://registry.npmjs.org';导出默认范围；接下来就是修改modules/utils/npm.js文件，思路大致如下：私有库地址为http，需要将https修改为http；设置我们私人图书馆的端口；根据npmConfig.js中的scopes匹配unpkg请求的包，如果是私有库包，使用内网的npm源。如果不匹配，则使用互联网的npm地址；预览npm.js源码并修改npm.js，执行npmrunbuild重新生成server.js文件，然后启动服务：npmrunstart；测试读取我们的私有库包：http://localhost:8080/privatelibrarypackage私有库包读取正常，再测试npm包：http://localhost:8080/@icedesign/empty-content-block@3.0.0/build/index.html现在私库和公网npm都可以正常预览了；出现问题：解析包出现302问题；npm.js中的fetchPackageInfo方法只处理了200和404，此时302没有处理。有时候拉一些公网资源会出现302。这种情况比较少见。目前尚不清楚是什么原因造成的。目前还没有处理，没有解决办法。如果要处理，一般思路是返回320，获取重定向的路径，请求重新拉取包的数据；getPackage方法解析包路径可能有问题；npm.js中getPackage方法中私有库包的url可能有问题，如果无法拉取私有库包，可以使用变量tarballURL调试该方法代码获取的路径是否正确；如果内网是HTTPS，还没有测试，目前是HTTP；有哪些应用场景？公司有npm私有库，发布了很多组件，但是很难找到。如果有预览平台，可以直接显示缩略图，直接进入预览页面。是不是很方便；建造自带静态资源加速器；
