Electronのレンダラープロセスでnode.jsのAPIが読み込めない

使用バージョン

cmd
1PS D:\Electron_project\electron-quick-start> node -v
2v10.16.0
3PS D:\Electron_project\electron-quick-start> npm -v
46.9.0

Electronのquickstartの手順に従い、適当なディレクトリを作成し

cmd
1# Clone this repository
2git clone https://github.com/electron/electron-quick-start
3# Go into the repository
4cd electron-quick-start
5# Install dependencies
6npm install
7# Run the app
8npm start

以下のコマンドを実行しました。

そして以下のように編集を行いました。

indexhtml
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="UTF-8">
6    <title>Hello World!</title>
7  </head>
8  <body>
9    <h1>Hello World!</h1>
10    We are using Node.js <span id="node-version"></span>,
11    Chromium <span id="chrome-version"></span>,
12    and Electron <span id="electron-version"></span>.
13    <button>button</button>
14    <!-- You can also require other files to run in this process -->
15
16    <!-- 追加 -->
17    <script src="./renderer.js"></script>
18
19  </body>
20</html>

rendererjs
1// This file is required by the index.html file and will
2// be executed in the renderer process for that window.
3// All of the Node.js APIs are available in this process.
4
5// 追加
6const fs = require('fs')
7const path = require('path')

そして

cmd
1npx electron .

上記のコマンドを実行しElectronを実行すると以下のように開発者コンソールにエラーが表示されており、
エラーメッセージで検索をかけてもあまり参考になるような情報は得られませんでした。

Uncaught ReferenceError: require is not defined
    at renderer.js:5

公式のクイックスタートの手順に従ってソースのコメント通りにAPIを追加しただけなのですが
なにか見当違いなことをしているのでしょうか。

ご意見頂けると幸いです。

行動規範の内容に同意します

回答1件

自己解決

main.jsのnew BrowserWindowしている場所を

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),

      // 追加
      nodeIntegration: true
    }
  })

と
nodeIntegration: trueという一文を追加するだけでした。

投稿2019/06/12 12:38

san_you

総合スコア14