如何在HTML中实现JS脚本条件引入？适配GitHub Pages场景

嘿，这个需求在静态站点开发里挺常见的，GitHub Pages本身并没有提供内置的条件加载支持，但我们可以通过前端逻辑或者简单的构建工具来解决这个问题，给你两个实用的方案：

方案一：前端JS动态判断环境加载脚本 #

这是最轻量化的方案，不需要额外工具，纯前端代码就能实现。核心思路是通过当前页面的域名判断是否处于本地开发环境，然后动态创建脚本标签加载对应的版本：

<script>
// 检测是否为本地开发环境
const isDevelopment = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
// 根据环境选择脚本地址
const angularScriptUrl = isDevelopment
  ? 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js'
  : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js';

// 创建并插入脚本标签
const scriptElement = document.createElement('script');
scriptElement.src = angularScriptUrl;
// 如果你的代码依赖Angular加载完成，这里可以加onload回调
scriptElement.onload = function() {
  console.log('Angular加载完成，可以执行依赖代码了');
};
document.head.appendChild(scriptElement);
</script>

这个方案的好处是零配置，直接写在HTML里就能用；唯一需要注意的是脚本是异步加载的，如果页面中有直接依赖Angular的代码，要放在onload回调里或者确保在脚本加载完成后执行。

方案二：用构建工具自动化替换脚本路径 #

如果你的项目稍微复杂一点，推荐用构建工具来自动化处理，避免手动修改出错。比如用npm脚本配合简单的替换工具，或者用Vite、Webpack这类构建框架：

子方案1：用npm脚本+替换工具 #

1. 安装replace-in-file工具：

npm install replace-in-file --save-dev

2. 在package.json里添加构建脚本：

{
  "scripts": {
    "deploy:prepare": "replace-in-file 'angular.js' 'angular.min.js' index.html --isRegex=false"
  }
}

3. 开发时直接使用完整版本的脚本路径，部署前先运行npm run deploy:prepare替换路径，再提交代码到GitHub。

子方案2：用Vite等构建框架（更推荐） #

如果用Vite搭建项目，可以利用它的环境变量替换功能：
在index.html里这样写：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular<%= import.meta.env.PROD ? '.min' : '' %>.js"></script>

Vite在开发模式下会自动渲染成angular.js，生产构建（部署时）会自动替换成angular.min.js，完全不用手动干预。

关于GitHub Pages的说明 #

GitHub Pages本质上是静态文件托管服务，它只会原样托管你提交的HTML、CSS、JS文件，没有内置的条件编译、路径替换这类动态功能，所以所有的逻辑都需要在本地处理好再提交，或者通过前端代码在浏览器端判断执行。

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