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

Question

Using Electron, I'm trying to organize IPC between main and renderer.使用 Electron，我试图在主程序和渲染器之间组织 IPC。 As instructions say I should add the script (see the title) to the index.html.正如说明所说，我应该将脚本（见标题）添加到 index.html。 But it doesn't look like it is loaded.但它看起来不像它被加载。 Nothing in the rendeder.js gets executed. renderer.js 中的任何内容都不会被执行。

It's in this tutorial https://www.brainbell.com/javascript/ipc-communication.html which is the most detailed one on the topic in the internet.在本教程https://www.brainbell.com/javascript/ipc-communication.html 中，这是互联网上有关该主题的最详细的教程。 Others just skip so much info in their articles that a learner simply can't reproduce it in the app.其他人只是在他们的文章中跳过了太多信息，以至于学习者根本无法在应用程序中重现它。

I tried:我试过：

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

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

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

etc similar.等类似。

Answer 1

I ran into the same problem.我遇到了同样的问题。

First, make sure when you launch the app, you turn on nodeIntegration:首先，确保在启动应用程序时打开 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
        }
    })

Then, reference this answer .然后，参考这个答案。

Playing with multiple options, both using require and src= methods work.使用多个选项，使用require和src=方法都有效。 See below with additional inline comments.请参阅下面的附加内联注释。

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

Some will block the HTML from loading until the script runs (I think if in the head tag, no matter what), while others seemed random whether the HTML would load before the script ran.有些会阻止 HTML 加载，直到脚本运行（我认为如果在head标记中，无论如何），而其他人似乎是随机的，HTML 是否会在脚本运行之前加载。 I tested with an alert box in my renderer.js , which would block the window from showing the HTML rendering if it ran first.我在我的renderer.js中测试了一个警告框，如果它首先运行，它将阻止窗口显示 HTML 渲染。

Answer 2

So let me show what I do, maybe that will help.所以让我展示我所做的，也许这会有所帮助。

Code to create a window.创建窗口的代码。 Note the webPreferences settings注意webPreferences设置

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

Without devtools you can not see error output or inspect content.如果没有devtools，您将无法看到错误输出或检查内容。 There are other ways to open devTools through menu and keyboard commands.还有其他方法可以通过菜单和键盘命令打开devTools 。

Then, assuming you have installed the script or lib through npm you can just do the following without specifying a path, otherwise you will need a relative path然后，假设您已经通过npm安装了脚本或库，您可以在不指定路径的情况下执行以下操作，否则您将需要一个相对路径

const THREE = require('three')

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

问题描述

2 个解决方案

解决方案1
1 2020-07-31 05:12:41

解决方案2
0 已采纳 2019-07-20 15:51:10

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

问题描述

2 个解决方案

解决方案1 1 2020-07-31 05:12:41

解决方案2 0 已采纳 2019-07-20 15:51:10

解决方案1
1 2020-07-31 05:12:41

解决方案2
0 已采纳 2019-07-20 15:51:10