<script> require('renderer.js') </script> - 不连接js文件答案

【问题标题】：<script> require('renderer.js') </script> - does not connect the js file<script> require('renderer.js') </script> - 不连接js文件
【发布时间】：2019-11-28 15:32:57
【问题描述】：

使用 Electron，我正在尝试在主渲染器和渲染器之间组织 IPC。按照说明，我应该将脚本（见标题）添加到 index.html。但它看起来不像它已加载。 render.js 中没有任何内容被执行。

在本教程https://www.brainbell.com/javascript/ipc-communication.html 中，这是互联网上关于该主题的最详细的一篇。其他人只是在他们的文章中跳过了太多信息，以至于学习者根本无法在应用程序中复制它。

我试过了：

<script> 
    require('renderer.js')
</script>

<script>
    require('./renderer.js')
</script>

<script src='renderer.js'>
</script>

类似的。

【问题讨论】：

您是否在Electron 5 工作——如果是，您需要在创建窗口时设置nodeintergration: true。
打开开发者工具。任何控制台错误？

标签： javascript html electron ipc require

【解决方案1】：

我遇到了同样的问题。

首先，确保在启动应用时打开 nodeIntegration：

app.on('ready', _ => {
    mainWindow = new BrowserWindow({
        title: "My Electron App",
        backgroundColor: '#FFF',
        height: 800,
        width: 1200,
        center: true,
        webPreferences: {
            nodeIntegration: true // works on main window only
        }
    })

然后，引用this answer。

玩多个选项，使用require 和src= 方法都有效。请参阅下面的其他内联 cmets。

<html>
  <head>
    <!-- make sure you have the semicolon after the require -->
    <!-- and make sure NOT to include the .js extension -->
      <script>require('./renderer');</script>
    <!-- make sure you include the extension -->
      <script src="./renderer.js" ></script>
  </head>
  <body>
    <!-- Put HTML first to avoid blocking -->
    <!-- All same options as in head work here, but shouldn't block -->
    <!-- In addition, async and defer might do something -->
    <!-- async should run script asynchronously, and defer wait until DOM loads -->
      <script src="./renderer.js" async></script>
      <script src="./renderer.js" defer></script>
  </body>
  <!-- scripts put here seems intermittent which runs first -->
</html>
<!-- scripts put here seems intermittent which runs first -->

有些会阻止 HTML 加载，直到脚本运行（我认为如果在 head 标记中，无论如何），而另一些似乎随机是否在脚本运行之前加载 HTML。我在renderer.js 中使用警告框进行了测试，如果它先运行，它将阻止窗口显示 HTML 渲染。

【讨论】：

【解决方案2】：

所以让我展示一下我的工作，也许这会有所帮助。

创建窗口的代码。注意webPreferences 设置

app.on('ready', function () {
  mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 768,
    backgroundColor: '#2C3E50',
    center: true,
    webPreferences: {
      nodeIntegration: true,
      devTools: true
    }
  })

没有devtools，您将看不到错误输出或检查内容。还有其他方法可以通过菜单和键盘命令打开devTools。

那么，假设您已经通过npm 安装了脚本或库，您可以在不指定路径的情况下执行以下操作，否则您将需要相对路径

const THREE = require('three')

【讨论】：

我建议您暂时跳过使用require 并在html页面中链接“renderer.js”脚本。将其放在底部或使用defer。有很多关于electron 的教程——有些比其他的好。试着一次学习一件事。比如这个人的教程就很好：视频Main and renderer process communication in Electron。相关文章：electron.rocks/…