未捕获的错误:找不到模块'jquery'

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

这里是我的应用程序在Atom编辑器的结构:

在这里输入图像说明

即它有以下几部分:

  1. main.js
  2. 的package.json
  3. 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 )加载在Electronshell,但与错误“未捕获的错误:找不到模块'jquery'”

在这里输入图像说明

你能帮我find这个问题的原因吗?

正如你可以在我的目录结构截图中看到的,我已经安装了jquery模块到我的文件夹中,并且通过“npm install jquery”命令来完成。

注:要在JS中使用“require”命令,我尝试在我的外部页面http://mydummysite/index.html页面中添加“require(”ipc“)”,并且它正在工作,因此可能是require(“ jQuery的“)。

我在电子添加外部模块(jQuery)的方式是否正确?

我是否在package.json中缺less一些依赖项?

我已经试过了:

  • npmcaching干净,npm安装jquery(到我的应用程序文件夹)
  • npm install – 保存jquery
  • npm安装jquery -g
  • npm重build
  • sudo npm安装jquery -g
  • sudo npm安装jquery
  • 导出NODE_PATH = / usr / local / lib / node_modules

以下是错误在module.js中的位置的屏幕截图

在这里输入图像说明

有人可以build议为什么要求(“ipc”)工作,并要求(“jquery”)不?

我的目标是使用带有节点集成的电子应用程序jQuery。

TL;博士

与正常的nodejs应用程序相比,您可以访问全局模块(例如位于/usr/bin/node ),electron不会自动设置NODE_PATH环境variables。 您必须手动将其设置为包含所需模块的所有path。


更新:

问题的答案

为什么require("ipc")工作,并require("jquery")不?

在这个问题中可以find,说明系统/用户模块不应该包含在模块的全局path中

因为它们可能包含未随应用程序提供的模块,并可能使用错误的v8头进行编译。

如果你看一下电子源,你可以看到内部模块被添加到module.globalPaths

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

这就是为什么你有权访问ipcapp等,而不是使用npm install -g全局npm install -g的模块。


我刚刚试过了最新的electron-prebuilt版本,本地服务器提供了与您提供的完全相同的HTML文件,我想我知道问题是什么:如果您没有将path追加到您的应用程序node_modules目录下应用程序根目录到NODE_PATHvariables它不会工作。 所以你需要做这样的事情:

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

导出NODE_PATH ,请确保提供绝对path。


更新2:

评论的回答:

我得到jQuery没有发现错误

是在这张票上find的。 基本上如果你使用jQuery的npm软件包,或者在电子文件的HTML文件中做如下的事情:

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

你得到的是一个工厂,而不是附加到全局上下文(例如window )的实际jQuery对象。 正如我在前面的回答 (也包含jQuery的源代码)中提到的,

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

现在要使用该工厂(通过从CDN导入代码或者如果您有本地可用的npm模块),您需要如下所示:

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

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

用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> 
 # assuming you have installed jquery locally instead of globally like in as npm install jquery -s # without -g flag 

而不是require( “jquery” ,从源目录给出相对path
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> 

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

为什么要求(“ipc”)工作,并要求(“jquery”)不?

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

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

在使用jQuery和电子时,我遇到了同样的问题,并找出这些情况的解决scheme:

 <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

同样的问题发生在我身上,一个简单的解决办法就是把它添加到你的index.js文件中:

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

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

将节点集成设置为false将在渲染过程中禁用node.js – 即,您的应用程序只能执行Web浏览器的操作。