引言
在开发过程中，我们可能会遇到 ESLint 报错 'document' is not defined 的情况。这个错误一般出现在使用了浏览器相关 API 的地方，比如在 window 或 document 对象上调用方法时。
本文将详细讲解这个错误的原因，以及如何解决这个问题。
错误原因
在浏览器中使用 window 或 document 对象时，我们并不需要将它们定义为变量。但是，ESLint 在默认情况下并不知道这些全局变量的存在，因此会警告 document 或 window 未定义。
解决方案
有两种方法可以解决这个问题。
方法一：通过配置 .eslintrc 文件
一种解决方法是在 .eslintrc 文件中配置全局变量：
{
"globals": {
"document": false,
"window": false
}
}在这个例子中，我们将 document 和 window 定义为全局变量，值为 false。这告诉 ESLint，我们不允许重写这些变量，而且它们已经定义过了。
方法二：使用 eslint-plugin-browser 插件
另一种解决方法是使用 eslint-plugin-browser 插件，该插件已经预定义了许多浏览器全局变量，并可以自动忽略这些变量的警告。
我们可以通过以下命令安装 eslint-plugin-browser：
npm install --save-dev eslint-plugin-browser
安装完成后，在 .eslintrc 文件中添加以下配置：
{
"plugins": ["browser"],
"extends": ["plugin:browser/recommended"]
}接着，我们就可以使用浏览器相关 API 了，而不会再看到 document 或 window 未定义的警告了。
示例代码
下面是一些例子，展示如何在脚本中使用 document 和 window 对象。
示例一：
-- -------------------- ---- -------
-- --- ----
--------------------------------------------------------------- -------- -- -
-----------------------
---
-- ---- ----
------------------------------- -------- -- -
--------------------------------------------------------------- -------- -- -
-----------------------
---
---在上面的示例中，我们监听了 .my-element 元素的点击事件，并将 'clicked' 打印到控制台中。由于我们尝试在页面加载之前访问 document，所以这个代码将触发警告信息 'document' is not defined。
解决方法是在 load 事件之后才访问 document。
示例二：
-- -------------------- ---- ------- -- --- ---- -- --------------------------------------- --- ------- - --------------- ---- -- ---------- - -- ---- ---- -- -------------------------------- --- ------- - --------------- ---- -- ---------- -
在上面的示例中，我们从 window.localStorage 中获取了某个数据，但是由于我们访问了 window，这个代码将触发警告信息 'window' is not defined。
解决方法是直接使用 localStorage，不需要通过 window 对象来访问。
总结
在使用浏览器相关 API 时，我们需要告诉 ESLint 这些全局变量的存在。我们可以通过修改 .eslintrc 文件或安装 eslint-plugin-browser 插件来解决这个问题。
当然，我们不应该直接在页面加载之前访问 document 或 window 对象。我们应该等到页面加载完成之后再使用这些对象。这也是一个优秀的编程实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ea5e748841e9894d07f5b