Tampermonkey中全局声明jQuery变量的最佳实践

在使用Tampermonkey开发用户脚本时，很多开发者会遇到ESLint报"$ is not defined"错误的问题。本文将深入分析这个问题的成因，并提供几种有效的解决方案。

问题背景

当我们在Tampermonkey用户脚本中使用jQuery时，通常会通过$或jQuery来调用其方法。然而，ESLint静态代码分析工具会认为这些变量未被定义，从而抛出错误。虽然可以通过在每个脚本顶部添加/* global $, jQuery */注释来消除警告，但这会导致代码重复和维护困难。

问题原因分析

1. ESLint的作用域规则：ESLint默认情况下不会自动识别通过<script>标签或浏览器环境注入的全局变量
2. Tampermonkey的执行环境：用户脚本运行在特殊的环境中，jQuery变量是通过扩展注入而非传统方式引入
3. 模板配置限制：在Tampermonkey设置中配置的全局声明可能不会自动应用到所有用户脚本

解决方案

方案一：单个脚本内声明（基础方案）

/* global $, jQuery */
// 你的脚本代码...

这是最基本的解决方案，适用于简单的脚本项目。

方案二：ESLint禁用检查（快速方案）

$ = jQuery // eslint-disable-line
// 后续代码...

这种方法直接告诉ESLint忽略这一行的未定义变量检查。

方案三：配置ESLint全局变量（推荐方案）

如果你使用自定义的ESLint配置，可以在配置文件中添加：

{
  "globals": {
    "$": "readonly",
    "jQuery": "readonly"
  }
}

方案四：Tampermonkey模板配置（高级方案）

1. 打开Tampermonkey仪表盘
2. 进入"设置"选项卡
3. 在"编辑器"部分找到"默认模板"
4. 在模板顶部添加全局变量声明

注意：此方法可能因Tampermonkey版本不同而效果有所差异。

最佳实践建议

1. 项目级解决方案：对于大型项目，建议使用方案三配置ESLint规则
2. 兼容性考虑：某些页面可能已经定义了$变量，使用前应做好冲突检测
3. 模块化开发：考虑将jQuery相关操作封装到单独模块中，减少全局依赖

总结

Tampermonkey环境下使用jQuery时遇到的ESLint警告问题，本质上是因为工具链对执行环境理解的不一致。开发者可以根据项目规模和复杂度选择合适的解决方案，平衡代码整洁度和开发效率。