未捕获的错误：找不到模块“jquery”答案

【问题标题】：Uncaught Error: Cannot find module 'jquery'未捕获的错误：找不到模块“jquery”
【发布时间】：2015-11-22 18:49:58
【问题描述】：

我正在使用Electron 制作桌面应用程序。在我的应用程序中，我正在加载一个外部站点（Atom 应用程序之外），比如说http://mydummysite/index.html 页面。

这是Atom Editor中我的应用程序的结构：

即它具有以下部分：

main.js
package.json
nodemodules>jquery（加载 jquery）

源代码：

main.js:

   'use strict';

    var app = require('app');

    app.on('ready', function() {
      var BrowserWindow = require('browser-window');

      var win = 
      new BrowserWindow({ width: 800, height: 600, show: false, 
               'node-integration':true });
      win.on('closed', function() {
        win = null;
      });

      win.loadUrl('http://mydummysite/index.html ');
      win.show();
    });

package.json:

{
  "name": "my-mac-app",
  "version": "5.2.0",
  "description": "My Mac Desktop App",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Me",
  "license": "ISC",
  "dependencies": {
    "jquery": "^2.1.4"
  }
}

外部页面 - http://mydummysite/index.html 页面代码：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World!</h1>

  </body>
<script>

   var jqr=require('jquery');

</script>
</html>

当我运行上述应用程序（通过将应用程序文件夹拖到 Electron）时，外部页面 (http://mydummysite/index.html) 在 Electron shell 中加载但有错误

未捕获的错误：找不到模块“jquery”

你能帮我找出这个问题的原因吗？

正如您在我的目录结构屏幕截图中看到的，我已经将 jquery 模块安装到我的文件夹中，并且我通过 npm install jquery 命令完成了它。

注意：为了在 JS 中使用require 命令，我尝试在我的外部页面http://mydummysite/index.html 页面中添加require("ipc")，它正在工作，那么require("jquery") 可能是什么原因。

我是否在 Electron 中以正确的方式添加了外部模块（jquery）？

我是否缺少 package.json 中的某些依赖项？

我已经尝试过的：

npm cache clean, npm install jquery（到我的应用文件夹）
npm install --save jquery
npm install jquery -g
npm rebuild
sudo npm install jquery -g
sudo npm install jquery
export NODE_PATH=/usr/local/lib/node_modules

这是module.js中引发错误的位置的屏幕截图

有人能建议为什么require("ipc") 有效而require("jquery") 无效吗？

我的目标是将 jQuery 与具有节点集成的电子应用程序一起使用。

【问题讨论】：

github.com/UncoolAJ86/node-jquery/issues/35 不确定这个链接是否能解决，但它会让你开始。
How to use node_modules within electron (formerly atom-shell)的可能重复
Yan，您提到的情况是我们在 atom shell 应用程序中使用页面时的情况。我正在从外部 url 加载页面。
你能显示 jquery 包的 package.json 吗？？

标签： javascript jquery node.js atom-editor electron

【解决方案1】：

tl;dr

与普通的 nodejs 应用程序相比，您可以访问全局模块（例如，位于 /usr/bin/node 中），electron 不会自动设置 NODE_PATH 环境变量。您必须手动将其设置为包含所需模块的所有路径。

更新：

问题的答案

为什么require("ipc") 有效而require("jquery") 无效？

在这个issue中可以找到，说明系统/用户模块不应该包含在模块的全局路径中

因为它们可能包含应用程序未附带的模块，并且可能使用错误的 v8 标头编译。

如果您查看electron's source，您会看到内部模块已添加到module.globalPaths：

# Add common/api/lib to module search paths.
globalPaths.push path.resolve(__dirname, '..', 'api', 'lib')

这就是为什么您可以访问ipc、app 等，但不能访问您使用npm install -g 全局安装的模块。

我刚刚尝试了最新的electron-prebuilt 版本，本地服务器提供的 HTML 文件与您提供的完全相同，我想我知道问题出在哪里：如果您没有将路径附加到您的应用程序@ 987654337@ 应用程序根目录下的 NODE_PATH 变量它不起作用。所以你需要做这样的事情：

export NODE_PATH=/PATH/TO/APP/node_modules
electron /PATH/TO/APP

导出NODE_PATH 时，请确保提供绝对路径。

**更新 2：**

评论的答案：

我得到 jQuery not found 错误

可在this ticket 中找到。基本上，如果您使用 jQuery 的 npm 包或在电子内的 HTML 文件中执行以下操作：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

你得到的是一个 factory 而不是附加到全局上下文的实际 jQuery 对象（例如window）。正如我在previous answer 中提到的（还包含 jQuery 的源代码）

当您在 CommonJS 或提供 module 和 module.exports 的类似环境中需要 jQuery 时，您得到的是一个工厂，而不是实际的 jQuery 对象。

现在要使用该工厂（通过从 CDN 导入代码，或者如果您在本地有可用的 npm 模块），您需要以下内容：

<script>
  window.jQuery = window.$ = require('jquery');
</script>

我写了一个article，解释了Node + jQuery的组合。

【讨论】：

@AleksandrM 我想是因为它是电子提供的内部模块。其他内部模块（例如app）也可以正常工作。
@AleksandrM @raj 我引用了问题和源代码，显示了为什么ipc 可用以及为什么全局结节不可用！
@AleksandrM 现在对我来说也很有意义 :)
非常好的后续行动，本来打算继续补充的，但你覆盖了它。
@YanFoto。我使用了 require('gulp')，它提醒我一个错误：无法加载模块“gulp”。我应该怎么做？我不清楚我应该把这些代码放在哪里export NODE_PATH=/PATH/TO/APP/node_modules electron /PATH/TO/APP

【解决方案2】：

在使用带有电子的 jQuery 时，我遇到了同样的问题，并为这些情况找到了解决方案：

<script type="text/javascript" src="js/jquery.min.js"
 onload="window.$ = window.jQuery = module.exports;" ></script>

来源：https://discuss.atom.io/t/electron-app-to-host-external-site/16390/9

【讨论】：

【解决方案3】：

# assuming you have installed jquery locally instead of globally like in as
npm install jquery -s         # without -g flag

而不是 require("jquery")，给出源目录的相对路径
require( "./node_modules/jquery/dist/jquery.min.js");

尝试以下方法：

<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>

或

<script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>

【讨论】：

【解决方案4】：

用 npm 安装 jquery 是不够的：

npm install --save jquery

它会恢复项目中 jQuery 的源文件。但是你必须在你的 html 文件中包含脚本：

<!DOCTYPE html>
<html>
  <head></head>

  <body>
      <h1>Hello World!</h1>
  </body>

  <!-- Try to load from cdn to exclude path issues. -->
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <script>
     window.jQuery = window.$ = jQuery;

     $(document).ready(function() {
         console.log( "jQuery is loaded" );
     });
  </script>

</html>

【讨论】：

"node_modules/jquery/dist/jquery.min.js" 路径将导致 "mydummysite/node_modules/jquery/dist/jquery.min.js" 这将给出 404。我在我的 Electron 应用程序而不是远程应用程序中安装了 jquery 模块（@ 987654322@)
是的，但是如果你想在你的虚拟站点中使用 jquery，你必须在你的虚拟站点中加载 jquery。要进行测试，您可以包含来自 jquery CDN 的脚本，就像没有路径问题一样：
如果我使用脚本标签，那么 jQuery 命名空间就不会暴露。节点集成的模块似乎有问题。
jQuery命名空间没有暴露，但是$正常暴露。
我需要 jQuery 命名空间，因为它在我网站的许多地方都被引用。

【解决方案5】：

同样的问题发生在我身上，一个简单的解决方案是将它添加到您的 index.js 文件中：

app.on('ready', function() {
      var mainWindow = new BrowserWindow({
        "node-integration": false
      })
//rest of your initialization code here.
})

这个问题是由节点引起的，更多信息请参考这个post

将 node-integration 设置为 false 将禁用渲染器中的 node.js 过程 - 即您的应用程序只能执行 Web 浏览器将执行的操作。

【讨论】：

【解决方案6】：

我希望下面的链接能让你对

的疑问有所了解

为什么 require("ipc") 有效而 require("jquery") 无效？

https://github.com/atom/electron/issues/254

https://discuss.atom.io/t/electron-app-to-host-external-site/16390/7

【讨论】：

我需要开启节点交互。第二个链接说要成功。