ReactJS错误无法编译'define'未定义答案

【问题标题】：ReactJS error Failed to compile 'define' is not definedReactJS错误无法编译'define'未定义
【发布时间】：2018-10-14 20:07:35
【问题描述】：

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

错误是：

'define' 没有定义为 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' 未定义 no-undef

此错误来自以下几行

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

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

欢迎提出任何建议:-)

【问题讨论】：

可能是你的脚本运行在严格模式下造成的
你有定义函数和变量填充吗？如果是这样，它们在您的代码中位于何处？贴出相关代码。我们无法帮助您处理您发布的代码
你用的是什么编译器？
你需要说你的编译器跳过jquery
所以 jquery 是一个外部脚本，而您正在尝试编译粘性插件？请显示您的 html 文件的相关部分

标签： javascript jquery reactjs sticky

【解决方案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 规则可能比普通开发人员所希望的更严格。在这种情况下，您可以使用这些相同的方法来禁用某些规则。但请始终尝试理解规则的含义，并考虑如何在不完全禁用规则的情况下修复代码。

【讨论】：

【解决方案2】：

错误来自您的eslint 参数。当amd 环境开启时，eslint 为定义和要求注册全局。

在你的.eslintrc.json 集合中：

"env": {
    "amd": true
},

【讨论】：

根据您的回答，我更新了我的代码，但仍然没有解决错误。

【解决方案3】：

如果您使用的是 webpack，您的 webpack 配置中可能缺少配置部分。

我通常将以下内容添加到我的 webpack 配置中：

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],
}

【讨论】：