如何在HTML文件中引用GitHub上的JavaScript文件并获取最新版本？

一、先修复前两种引用方式的问题 #

• GitHub Pages 链接无效：
  你用的格式没错，但必须先在仓库的「Settings」→「Pages」里开启服务，选择要发布的分支（比如main）和目录，等待GitHub完成发布后，链接才能正常访问。
• Raw.githubusercontent 链接无效：
  正确格式需要包含用户名、分支名，比如：

  <script src="https://raw.githubusercontent.com/[你的用户名]/[仓库名]/main/[文件名].js"></script>
  

  但这个方式有缺陷：GitHub返回的MIME类型是text/plain，部分浏览器会阻止加载，不推荐用于正式引用。

二、解决jsDelivr缓存旧版本的问题 #

jsDelivr默认会缓存文件，要加载最新修改的内容，用这几个方法：

• 指定分支或提交哈希：
  • 拉取分支最新版：在链接里加上分支名，比如@main：

    <script src="https://cdn.jsdelivr.net/gh/[你的用户名]/[仓库名]@main/[文件名].js"></script>
    

  • 精准指定提交版本：每次修改后，复制GitHub上该文件的提交哈希（比如一串7位的字母数字），替换成@[提交哈希]，这样会直接加载该版本的文件，完全避免缓存。
• 加版本号参数：
  在链接末尾加?v=xxx，每次更新就改版本号，比如：

  <script src="https://cdn.jsdelivr.net/gh/[你的用户名]/[仓库名]/[文件名].js?v=1.0.3"></script>
  

  浏览器会把带新参数的链接当成新资源，重新请求最新文件。
• 手动清除CDN缓存：
  访问https://purge.jsdelivr.net/gh/[你的用户名]/[仓库名]/[文件名].js，可以手动清除该文件的CDN缓存，之后再加载就是最新内容。

三、推荐的最优方案 #

开启GitHub Pages服务，用Pages链接+版本参数的方式，既稳定又能避免缓存：

<script src="https://[你的用户名].github.io/[仓库名]/[文件名].js?v=1.0.4"></script>

每次修改JS后，更新v=后面的数字即可。

内容的提问来源于stack exchange，提问作者pro prog