基于JHipster的Angular TS项目能否用browserslist限制旧浏览器访问

首先明确一个核心误区：browserslist本身不具备运行时拦截旧浏览器访问的功能。它的作用是给项目中的Babel、PostCSS、Autoprefixer等编译、兼容性处理工具提供目标浏览器范围参考，工具会根据该配置决定要兼容的浏览器范围、生成对应兼容代码，全程仅在项目编译阶段生效，不会在用户访问的运行阶段做任何版本判断或拦截操作。

当前配置不生效的核心原因首先是配置写法有误：browserslist默认读取package.json里的browserslist字段，你使用的自定义字段"list of browsers"不会被browserslist及关联工具识别，自然无法生效。

如果要实现旧版本浏览器拦截的需求，可以按照以下步骤操作：

• 先把package.json里的配置字段修改为正确的browserslist，示例如下：

"browserslist": [
  "1 latest version of firefox"
]

• 安装browserslist-useragent包，该包可基于你配置好的browserslist规则，校验当前用户的浏览器user-agent是否符合要求。
• 在Angular项目的入口文件main.ts中优先执行浏览器版本校验逻辑：如果当前浏览器不符合规则，直接跳转到浏览器升级提示页，不执行后续Angular应用的初始化逻辑。
• 针对JHipster项目，也可以把检测逻辑放到全局路由守卫中，覆盖所有路由访问场景，避免出现漏检。

需要注意的是，浏览器user-agent存在被用户篡改的可能，该拦截方案只能覆盖普通用户场景，无法完全阻止刻意篡改标识的访问。

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