为什么 Electron 页面不直接加载 JQuery？ [复制]答案

【问题标题】：Why does Electron page not directly load JQuery? [duplicate]为什么 Electron 页面不直接加载 JQuery？ [复制]
【发布时间】：2021-01-15 02:11:18
【问题描述】：

最近，我想用电子和引导程序编写一个应用程序。我在get started page of bootstrap 上使用sn-p。就像下面一样。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

这是一个非常简单的页面，直接用浏览器打开就可以了。但是，当我像这样在电子上通过new BrowserWindow 启动它时。

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

会得到的错误

我尝试了很多方法并通过本地需要这样的 jquery 来修复它

  <script>
    window.jQuery = window.$ = require('jquery');
  </script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>

但我想知道为什么它会遇到这个错误？ bootstrap sn-p 上的所有脚本来源都来自 CDN，并且在浏览器上运行良好。它应该在电子上工作。

【问题讨论】：

打开开发工具并在网络选项卡上显示发生了什么以及为什么它不加载。

标签： javascript html jquery bootstrap-4 electron

【解决方案1】：

我认为这可能是因为在 Electron 中提供了 Node.js 上下文，jQuery 认为它在 Node 上运行并且就像在 Node 上需要 jQuery 一样 - 这与浏览器根本不同。不过我会感到惊讶，因为我认为 jQuery 会首先检查窗口对象是否存在，这在 Electron 中应该是这种情况。

【讨论】：

这不是真的，jquery中没有“以节点模式运行”。
如果您查看 3.5.1 (unpkg.com/jquery@3.5.1/dist/jquery.js) 的源代码，您会在第 18 行找到：if ( typeof module === "object" && typeof module.exports === "object" ) 所以 jQuery 确实在运行在浏览器和节点中。
我对其进行了测试，如果在创建 BrowserWindow 时禁用 nodeIntegration，则不会出现错误。这表明此处存在的 Node 上下文确实发挥了作用。
我找到了原因，在第 10864 行你有 if (typeof noGlobal === 'undefined') { window.jQuery = window.$ = jQuery; } 当使用 nodeContext 运行时，noGlobal 设置为 true，根据第 28 行，这就是为什么 $ 没有在窗口上导出因此引导程序找不到它。
他确实提到他能够解决它，并明确询问为什么它不起作用，这是我在回答中解释的。