javascript - ReactJS错误编译失败 'define'未定义

Question

我尝试编译的应用程序未使用外部 jquery 及其关联的 JS 文件进行编译。当我尝试将这些文件链接到 ReactJS 应用程序中的 HTML 页面时，它会抛出以下错误。

错误是:

'define' is not defined no-undef.

此错误来自 jquery.js 文件，该文件本质上是一个外部文件，显示此错误的行是:

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
}

有一个 jquery.sticky.js 文件，添加后我收到这些错误。

'jQuery' is not defined no-undef

'padding' is not defined no-undef

此错误来自以下行

 padding =  s.stickyElement.innerWidth() - s.stickyElement.width();

基本上，重点是我正在尝试将 HTML 模板转换为 ReactJS 模板，但我在添加外部 JS 文件时遇到了困难，默认情况下 ReactJS 会编译这些文件以查看是否符合标准。除了 JS 文件设置之外，我能够将整个主题转换为 React。我需要这方面的帮助。

欢迎任何建议:-)

Answer 1

您所看到的只是违反 ESlint 规则，即在未先定义变量的情况下不允许使用该变量。例如，以下内容将导致错误:

a = 5

虽然这可行:

var a = 5;

问题是您无法定义正在使用的变量，例如 jQuery，因为它们已经是全局定义的。但 ESLint 并不知道这一点，只是认为 jQuery 就像您忘记定义的任何其他变量一样。

您有多种选择，其中一种是完全禁用此 ESLint 规则。为此，您只需在文件顶部添加以下内容即可:

/* eslint no-undef: "off"*/

请注意，错误消息中已包含规则名称 no-undef。

更好的选择是保持规则启用，但让 ESLint 知道像 jQuery 和 padding 这样的变量是外部包提供的全局变量。为此，您只需将以下内容添加到文件顶部即可:

/* global jQuery, padding */

请记住，es-lint“编译”错误本身并不是真正的编译错误，您发布的代码是有效的代码，否则可以在浏览器中按原样工作。有时 ESLint 规则可能比普通开发人员希望的更严格。在这种情况下，您可以使用这些相同的方法来禁用某些规则。但始终尝试理解规则的含义，并考虑如何在不完全禁用规则的情况下修复代码。