电子应用程序Jquery模块不加载

加载电子jquery时,我有一个问题。

这个问题只在main.js上存在

mainWindow.loadURL('http://localhost:3000/menu'); 

我发回menu.html

然而,当我使用这个方法的jquery工作正常

  mainWindow.loadURL('ile://' + __dirname + '/menu.html'); 

我需要它使用本地主机。

这是一个已知的问题。 这是因为JQuery自动感知node.js的存在–Electron向浏览器添加了一个node.js上下文,所以JQuery会感到困惑。

最好的方法是通过npm安装JQuery,使用electron-rebuild然后将你的html文件改为:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Electron App</title> <link href="stylesheets/main.css" rel="stylesheet" type="text/css"> <link href="./node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="helpers/context_menu.js"></script> <script src="helpers/external_links.js"></script> </head> <body> <div class="container"> <h1 id="greet"></h1> <p class="subtitle"> Welcome to <a href="http://electron.atom.io" class="js-external-link">Electron</a> app running on this magnificent <strong id="platform-info"></strong> machine. </p> <p class="subtitle"> You are in <strong id="env-name"></strong> environment. </p> <div class="jumbotron"> <h1>Bootstrap Test</h1> <p> Some content that should be in a Bootstrap "jumotron" box. If it isn't, check your html code to make sure that the Bootstrap css is loaded. Also check the dev console in the app to look for errors. </p> </div> </div> <script>window.$ = window.jQuery = require('jquery');</script> <script src="app.js"></script> </body> </html> 

这是一个标准的样板,但是在特殊的JQuery加载器脚本和app.js加载器之后,如果您在正常的应用程序脚本中需要使用jquery,则可以使用它。例如,加载Twitter Bootstrap现在可以通过使用npm安装bootstrap,做electron-rebuild ,然后在你的app.js中使用这个:

import bootstrap from 'bootstrap';