重构4年前老项目编译出现大量ESLint "not defined"报错如何解决

一、解决no-undef类型的全局变量未定义报错 #

这类报错是因为ESLint无法识别你在HTML中提前引入的第三方库注册的全局变量，不用修改业务代码，任选以下一种方法即可：

• 方法1（最简单，无需改配置）：在main.min.js的最顶部添加全局声明注释

/* global $, videojs, Waypoint */

• 方法2（适合多文件共用全局变量的场景）：修改项目中的ESLint配置文件（.eslintrc.js / .eslintrc.json），添加globals配置项

{
  "globals": {
    "$": "readonly",
    "videojs": "readonly",
    "Waypoint": "readonly"
  }
}

二、解决变量/参数未使用的报错 #

这类报错是ESLint的语法校验提示，不会影响原有功能运行，优先推荐删除无用代码简化逻辑，操作如下：

1. 修复'waypoint' is assigned a value but never used报错
   删掉没用的waypoint变量声明，把WAYPOINTS模块里的对应代码改成：

new Waypoint({
    element: waypoints[i],
    handler: function(direction) {
        this.element.classList.toggle('in-view');
    },
    offset: '60%'
});

2. 修复'direction' is defined but never used报错
   删掉无用的direction参数，把handler改成：

handler: function() {
    this.element.classList.toggle('in-view');
}

3. 修复'jacket' is assigned a value but never used报错
   删掉没用的jacket变量声明和赋值，把360 SLIDER模块里的init函数改成：

function init(){
    $('.lp-jacket-360').ThreeSixty({
        // 原有配置内容保持不变
    });
}

如果担心修改业务代码出问题，可以在对应行上方加ESLint忽略注释跳过校验，比如// eslint-disable-next-line no-unused-vars。

三、可选的低侵入代码整理建议 #

原有功能正常不需要大改，如需优化可以做以下调整：

• 把多个分散的$(document).ready()合并为一个，所有初始化逻辑统一放在里面，结构更清晰
• 删除调试用的冗余注释，比如// Orig 30这类临时标记
• 把多次用到的DOM选择器提前缓存为变量，减少重复DOM查询

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