JavaScript-未捕获的错误:找不到模块“ jquery”

我正在使用Electron制作桌面应用程序。 在我的应用程序中,我正在加载一个外部站点(Atom应用程序外部),例如说[http://mydummysite/index.html]页面。

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

enter image description here

即它具有以下部分:

  1. npm rebuild
  2. npm rebuild
  3. npm rebuild(加载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'

enter image description here

您能帮我找到这个问题的原因吗?

如您在目录结构的屏幕快照中所见,我已经将jquery模块安装到了我的文件夹中,并通过npm rebuild命令完成了此操作。

注意:要在JS中使用npm rebuild命令,我尝试在我的外部页面[http://mydummysite/index.html]页面中添加npm install jquery,但该按钮正在运行,因此require("jquery")可能是原因。

我是否在Electron中以正确的方式添加了外部模块(jquery)?

我是否在npm rebuild中缺少某些依赖关系?

我已经尝试过的:

  • npm rebuildnpm install jquery(到我的应用文件夹)
  • npm rebuild
  • npm rebuild
  • npm rebuild
  • require("ipc")
  • require("ipc")
  • require("ipc")

这是在require("ipc")中引发错误的位置的屏幕截图

enter image description here

有人可以建议为什么require("ipc")可以工作而require("jquery")不能工作吗?

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

Raghav asked 2020-01-12T15:19:36Z
6个解决方案
39 votes

tl; dr

与普通的nodejs应用程序不同,在该应用程序中,您可以访问全局模块(例如,位于module中),电子不会自动设置module.exports环境变量。 您必须手动将其设置为包含所需模块的所有路径。


更新:

问题的答案

为什么module工作,而module.exports没有工作?

将在此问题中找到,指出系统/用户模块不应包含在模块的全局路径中

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

并且,如果您查看电子源,您会发现内部模块已添加到module

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

这就是为什么您可以访问modulemodule.exports等,但不能访问使用npm install -g全局安装的模块的原因。


我刚刚使用最新的module版本进行了尝试,该版本的本地服务器提供与您提供的HTML文件完全相同的HTML文件,我想我知道这是什么问题:如果您不将路径附加到应用程序根目录下的应用程序module module.exports变量将无法正常工作。 因此,您需要执行以下操作:

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

导出module时,请确保提供绝对路径。


更新2:

评论的答案:

我收到jQuery找不到错误

在此票证中可以找到。 基本上,如果您使用jQuery的npm包或在电子内部的HTML文件中执行以下操作:

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

您得到的是工厂,而不是附加到全局上下文的实际jQuery对象(例如module)。 正如我在上一个答案中提到的(还包含jQuery的源代码)

当您在提供modulemodule.exports的CommonJS或类似环境中需要jQuery时,得到的只是工厂而不是实际的jQuery对象。

现在要使用该工厂(通过从CDN导入代码,或者如果本地有npm模块),则需要以下内容:

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

我写了一篇文章,解释了Node + jQuery的组合。

Yan Foto answered 2020-01-12T15:21:16Z
7 votes

用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>
Damien answered 2020-01-12T15:21:40Z
3 votes
# 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>
VanagaS answered 2020-01-12T15:22:13Z
3 votes

在将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]

gunivan answered 2020-01-12T15:22:37Z
2 votes

希望下面的链接能给您一些疑问

为什么require(“ ipc”)可以正常工作,而require(“ jquery”)却不能正常工作?

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

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

Akki619 answered 2020-01-12T15:23:10Z
0 votes

我遇到了同样的问题,一个简单的解决方案是将其添加到您的index.js文件中:

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

问题是由节点引起的,有关更多信息,请参阅此帖子

将node-integration设置为false将禁用渲染器中的node.js   流程-即您的应用只能执行网络浏览器可以执行的操作。

ProllyGeek answered 2020-01-12T15:23:39Z
translate from https://stackoverflow.com:/questions/32265449/uncaught-error-cannot-find-module-jquery