Question

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

以下是Atom Editor中我的应用的结构：

即它有以下部分：

main.js
的package.json
nodemodules＆gt; 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中但错误＆＃34;未捕获错误：无法找到模块＆＃39; jquery＆＃39;＆＃34;

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

正如您在我的目录结构截图中看到的，我已经将jquery模块安装到我的文件夹中，我通过＆＃34; npm install jquery＆＃34;命令。

注意：使用＆＃34;要求＆＃34; JS中的命令我尝试添加＆＃34; require（＆＃34; ipc＆＃34;）＆＃34;在我的外部页面http://mydummysite/index.html页面中，它正在运行，因此可能是需要的原因（＆＃34; jquery＆＃34;）。

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

我在package.json中错过了一些依赖吗？

我已尝试过的内容：

npm cache clean，npm install jquery（到我的app文件夹）
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

有人可以建议为什么要求（＆＃34; ipc＆＃34;）正在运行并要求（＆＃34; jquery＆＃34;）不是吗？

我的目标是将jQuery与电子应用结合使用，节点集成为真。

Answer 1

<强> TL;博士

与普通的nodejs应用程序相比，您可以访问全局模块（例如，位于/usr/bin/node），电子不会自动设置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文件，我想我知道问题所在：如果你没有追加路径到你的应用根目录下的应用node_modules目录到NODE_PATH变量，它不会起作用。所以你需要做这样的事情：

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

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

<小时/> 更新2：

评论的答案：

我得到jQuery not found errors

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

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

您得到的是 factory ，而不是附加到全局上下文的实际jQuery对象（例如window）。正如我在previous answer（也包含jQuery的源代码）

中提到的那样

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

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

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

我写了article来解释Node + jQuery的组合。

Answer 2

使用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>

Answer 3

将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

Answer 4

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

而不是 要求（ “jquery”） ，从源目录中提供相对路径
的 需要（ “./ node_modules / jquery的/ DIST / jquery.min.js” 的）;

尝试以下方法：

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

OR

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

Answer 5

我希望以下链接可以解释您的怀疑

为什么要求（＆＃34; ipc＆＃34;）正在工作并要求（＆＃34; jquery＆＃34;）不是？

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

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

Answer 6

同样的问题发生在我身上，一个简单的解决方案是将它添加到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浏览器的操作。

未捕获错误：无法找到模块＆＃39; jquery＆＃39;

6 个答案: