将 jQuery 集成到电子应用程序中答案

【问题标题】：Integrate jQuery into a electron app将 jQuery 集成到电子应用程序中
【发布时间】：2016-10-11 05:55:00
【问题描述】：

我正在尝试将 jquery 功能添加到用电子编写的桌面应用程序中使用电子快速启动 repo，我将下载的 jquery 文件添加到 main.html 文件中，如下所示：

<script> require("./jquery.min.js"); </script>

左右：

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

然后在index.js 文件中，我在createWindow 函数中添加代码，因为这似乎是正确的地方，但老实说，我尝试的任何地方或多或少都会给我同样的错误。

mainWindow.$ 是 undefined，BrowserWindow 和 app 也是如此

mainWindow 在createWindow 函数中定义，如下所示： mainWindow = new BrowserWindow({width: 800, height: 600})

并且 BrowserWindow 被声明在文件的顶部，如下所示： const BrowserWindow = electron.BrowserWindow

知道我哪里出错了，我应该更改/添加哪些声明？

提前致谢

【问题讨论】：

可能的答案：stackoverflow.com/a/37480521/1061836

标签： javascript jquery html node.js electron

【解决方案1】：

在使用电子时，一些额外的符号也会插入到 DOM 中，从而导致问题。因此，您可以按如下方式使用 jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

注意“onload”里面的代码。

【讨论】：

jQuery requires a window with a document 不幸的是，我在任何网站上找到的答案都没有奏效。

【解决方案2】：

当您在index.js 或主进程中调用require 时，它正在寻找节点模块。因此，您需要通过 npm 安装 jQuery 并将其作为依赖项保存在您的应用程序 package.json 文件中。

npm install jquery --save

那么你的index.js理论上应该可以很好地使用

let $ = require('jquery');
mainWindow.$ = $;

请参阅Node.JS section for installing jQuery。这就是 Electron 使用的。

老答案

在您的 main.html 中，只需像添加任何传统 JS 文件一样包含 JavaScript。

<script src="./jquery.min.js"></script>

【讨论】：

这似乎无法解决问题。此外，我认为 require 语句已经解决了这个问题。问题在于 index.js 文件中的可见性。如果我在 require 语句之后添加一个 console.log($) 语句，我会得到我所期望的。只是可见性没有转化为 index.js 文件
@omu_negru 抱歉，我误解了您的要求。我已经用应该解决您问题的步骤更新了我的答案。如果它不起作用，请告诉我
谢谢，但这会导致应用程序抛出另一个异常require(...).jsdom(...).createWindow is not a function
@omu_negru 你能分享你的index.js的代码吗？不太清楚为什么会出错
@omu_negru 还有，你想让我问一下你为什么要在你的主进程中使用 jQuery 吗？

【解决方案3】：

要将jQuery 集成到您的电子应用程序，请按照以下简单步骤操作

第 1 步：在终端中运行

npm install jquery --save

第 2 步：将此行添加到您的 angular.json 或 angular-cli.json 文件中

 "build": {
        "options": {
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js", //add this line
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
...
...
     }
  }

第 3 步：最后将此行添加到您的 index.html 文件中

 <!-- Need this for jQuery electron -->
  <!-- Insert this line above script imports  -->
  <script>if (typeof module === 'object') {
    window.module = module;
    module = undefined;
  }</script>

  <!-- Insert this line after script imports -->
  <script>if (window.module) module = window.module;</script>
</head>

你也可以使用这个template

【讨论】：