前言

unpkg、jsdelivr 等站点可加速 NPM 包文件,适合作为个人网站或演示案例的免费 CDN。

虽然上传文件到 NPM 很简单,创建 package.json 然后 npm publish 即可,但之后更新却很麻烦 —— 即使只更新一个文件,也要发一个新版本的包。由于 URL 包含版本号,因此所有文件的 URL 都会变化,导致无法利用缓存。

当然也可以增量发布,每次只发布变化的文件,从而充分利用已有的文件。但这需记录每个文件的状态,实现起来较为麻烦。

无状态

这里讲解一种更巧妙的方案 —— 使用文件 Hash 作为版本号。

虽然版本号必须是 1.0.0 这种格式,但 semver 允许设置 pre-release 后缀,例如 1.0.0-alpha

因此可以将文件 Hash 作为后缀,并且每个包只有一个文件。文件名随意,尽量使用文本格式的扩展名,从而能被 CDN 压缩传输。例如:

https://unpkg.com/free-host@0.0.0-C0LZDygPhSzaVUKy/index.css

这样就不用单独维护每个文件的版本了,所有文件都是 0.0.0 版本。如果存在多个内容相同的文件,它们还可共享同个 URL。

演示

根据上述思路,编写相应的脚本 npm-upload.sh

使用前登陆 NPM。通过 NPM_PKG 环境变量指定包名:

export NPM_PKG=package_name

例如上传 hello.txt

echo "Hello World" > hello.txt

~/npm-upload.sh hello.txt

得到结果:

https://unpkg.com/free-host@0.0.0-0qhPS4tlCTfsj3PN/index.txt

https://cdn.jsdelivr.net/npm/free-host@0.0.0-0qhPS4tlCTfsj3PN/index.txt

可同时上传多个文件。例如上传当前目录下所有文件:

~/npm-upload.sh $(find * -type f)

得益于 Hash 的优势,上传前脚本可检查该文件是否存在,所以内容相同的文件不会重复上传。

应用

如何将网站所有 URL 都映射到 unpkg 或 jsdelivr?一个简单的办法是用 <base> 重置根路径。但这只适用于相对路径,并且一次只能选择一个 CDN。

有没有办法自动选择最快的那个 CDN,并且出现问题后无缝切换到另一个?事实上可通过 Service Worker 实现。案例参考:https://github.com/EtherDream/freecdn/tree/master/examples/free-host

免费 CDN 玩法 —— 文件一键上传到 NPM的更多相关文章

  1. 文件一键上传、汉字转拼音、excel文件上传下载功能模块的实现

    ----------------------------------------------------------------------------------------------[版权申明: ...

  2. 免费 CDN 玩法 —— 将整个网站打包成一个图片文件

    资源合并 前端开发者都知道,过多的请求对性能影响很大.而且有些 CDN 不仅按流量收费,请求数也收费,如果网页里有大量小文件,显然不划算. 为此不少开发者将零碎的小文件进行合并优化,例如 JS/CSS ...

  3. HTML中简单实现文件的一键上传的操作

    在html中实现文件上传的方式为form表单中使用input type="file"控件,但是这个控件往往显示不是美观,影响页面效果,这时候,一般就通过一键上传的操作,来实现点击一 ...

  4. jquery ocupload一键上传文件应用

    直接上栗子 这是官方文档栗子 var myUpload = $(element).upload({ name: 'file', action: '', enctype: 'multipart/form ...

  5. Python 一键上传下载&一键提交文件到SVN入基线工具

    一键上传下载&一键提交文件到SVN入基线工具   by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用说明 1   注: 根据我司项目规则订制的一套工具,集成以下功能,源码 ...

  6. 带进度条的文件批量上传插件uploadify

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...

  7. 使用ocupload和POI一键上传Excel并解析导入数据库

    使用的工具如下:  JQuery ocupload jquery.ocupload-1.1.2.js Apache POI poi-3.9.jar 如果是Maven项目添加依赖如下: <depe ...

  8. js实现文件的上传和输出,拖拽上传图片

    js文件上传 文件下载 以前的文件的下载都是在服务器,现在也是放在服务器比较好,有时候为了一些开发的方便,我们临时把处理的数据就放在了本地,然后自己访问.这个也是可以的. 1.利用html5的 Fil ...

  9. 利用blob对象实现大文件分片上传

    首先说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器. 假如需要做到这一步, ...

随机推荐

  1. HCNP Routing&Switching之OSPF外部路由类型以及forwarding address

    前文我们了解了OSPF的4类.5类LSA,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15222969.html:今天我们来聊一聊外部路由类型和forward ...

  2. 在同一台计算机中运行多个MySQL服务

    目录 一.问题的来源 二.配置 1. 修改原来MySQL系统的my.ini文件 2. 修改注册表 3. 重新启动服务 4. 最终效果 一.问题的来源 这个学期里我需要修读<数据库系统>的课 ...

  3. 聚类算法与K-means实现

    聚类算法与K-means实现 一.聚类算法的数学描述: 区别于监督学习的算法(回归,分类,预测等),无监督学习就是指训练样本的 label 未知,只能通过对无标记的训练样本的学习来揭示数据的内在规律和 ...

  4. 【良心保姆级教程】java手把手教你用swing写一个学生的增删改查模块

    很多刚入门的同学,不清楚如何用java.swing去开发出一个系统? 不清楚如何使用java代码去操作数据库进行增删改查一些列操作,不清楚java代码和数据库(mysql.sqlserver)之间怎么 ...

  5. JDBC管理事务

    一.事务概念:打包一起的多个步骤的业务操作,要么同事成功,要么同时失败,则需要用事务管理: 二.代码实现

  6. Go并发编程--正确使用goroutine

    目录 1. 对创建的gorouting负载 1.1 不要创建一个你不知道何时退出的 goroutine 1.1.1 不要帮别人做选择 1.1.2 不要作为一个旁观者 1.1.3 不要创建不知道什么时候 ...

  7. ysoserial CommonsColletions1分析

    JAVA安全审计 ysoserial CommonsColletions1分析 前言: 在ysoserial工具中,并没有使用TransformedMap的来触发ChainedTransformer链 ...

  8. AspectJWeaver文件写入gadget详解和两种应用场景举例

    目录 0 前言 1 环境 2 gadget解析 2.1 高版本Commons-Collections的防御措施 2.2 获取AspectJWeaver的调用链 2.3 gadget详解 3 两种应用场 ...

  9. HDFS基本命令

    1.创建目录 hadoop dfs -mkdir /data hadoop dfs -mkdir -p /data/data1   创建多级目录 2.查看文件 hadoop dfs -ls / 3.上 ...

  10. PHP中的日期相关函数(一)

    日期相关的操作函数是我们在日常的工作开发中最常接触到的功能.当然,大部分同学可能最多用到的就是 date() . time() 这两个函数,我们今天先不讲这两个函数,或许后面的文章也不太会讲它们,毕竟 ...