ReactJS错误未能编译'define'未定义

Question

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

错误是：

“定义”未定义为no-undef。

此错误来自jquery.js文件，该文件本质上是外部文件，并且显示此错误的行是：

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

有一个jquery.sticky.js文件，添加后出现这些错误。

未定义'jQuery'no-undef

未定义“填充”

该错误来自以下行

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

基本上，重点是我试图将HTML模板转换为ReactJS模板，但是我只能添加外部JS文件，而默认情况下，ReactJS会编译这些外部JS文件以查看是否符合标准。除了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规则可能比普通开发人员更喜欢。在这种情况下，您可以使用这些相同的方法来禁用某些规则。但是，始终尝试理解规则在说什么，并考虑如何在不完全禁用规则的情况下修复代码。