<p>次のように <code>renderer</code> プロセスでノード モジュール (この場合は <code>fs</code>) を使用してみました。 </p>
<pre class="brush:php;toolbar:false;">// main_window.js
const fs = require('fs')
関数アクション() {
コンソール.ログ(fs)
}</pre>
<p><sup>注: <code>main_window</code> のボタンを押すと、<code>action</code> 関数が呼び出されます。 </sup></p>
<p>しかし、これではエラーが発生します: </p>
<pre class="brush:php;toolbar:false;">Uncaught ReferenceError: require が定義されていません
main_window.js:1</pre> で
<p>この受け入れられた回答が示すように、<code>main_window</code> を初期化するときにこれらの行を <code>main.js</code> に追加することで、この問題を解決できました。 /p>
<pre class="brush:php;toolbar:false;">// main.js
main_window = 新しいブラウザウィンドウ({
幅: 650、
高さ: 550、
ウェブ設定: {
ノード統合: true
}
})</pre>
ただし、ドキュメントによると、これはベスト プラクティスではなく、<code>preload.js</code> ファイルを作成し、その中にこれらの Node モジュールをロードしてから、すべての <code>renderer</ にロードする必要があります。コード＞プロセス内で使用します。このように:<p><br /></p>
<p><code>main.js</code>:</p>
<pre class="brush:php;toolbar:false;">main_window = new BrowserWindow({
幅: 650、
高さ: 550、
ウェブ設定: {
プリロード: path.join(app.getAppPath(), 'preload.js')
}
})</pre>
<p><code>preload.js</code>:</p>
<pre class="brush:php;toolbar:false;">const fs = require('fs')
window.test = function() {
コンソール.ログ(fs)
}</pre>
<p><code>main_window.js</code>:</p>
<pre class="brush:php;toolbar:false;">function action() {
window.test()
}</pre>
<p>そしてそれはうまくいきました! </p>
<p>ここで私の質問は、<code>renderer</code> プロセスのコードのほとんどを <code>preload.js</code> に記述する必要があるというのは直観に反していませんか? <code>preload.js</code> 内の Node モジュールにのみアクセスできます)、各 <code>renderer.js</code> ファイル内の関数を呼び出すだけです (ここでは、<code>main_window. js</code>)?ここで何が理解できないのでしょうか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
この例を考えてみましょう
公式ドキュメントのすべてをコード内のどこにでも直接実装できるわけではありません。環境とプロセスを簡潔に理解する必要があります。
ノード統合プリロードは必要ありません。 Node.js は Main と Renderer で利用できます。Cプリロードが必要です。 Node.js はメイン、プリロード、レンダラーで利用できます。プリロードを正しく使用するにはどうすればよいですか?
メイン プロセスとレンダラー プロセスが通信するには、Electron のプロセス間通信 (IPC) を使用する必要があります。
-
main プロセスで、次を使用します。
-
-
- プレロード プロセスで、 ユーザー定義エンドポイント をレンダラー プロセスに公開します。
レンダラ - プロセスでは、パブリック ユーザー定義エンドポイント を使用して次のことを行います。
メインにメッセージを送信
- メインからメッセージを受信する
-
実装例
＃＃＃＃＃＃主要＃＃＃＃＃＃ リーリー プリロードBrowserWindow.webContents.send() code>レンダラーにメッセージを送信するメソッドipcMain.handle()レンダラからメッセージを受信するメソッドリーリー
レンダラーリーリー Promise を使用してみてはいかがでしょうか?
可能な限り同じプロセス/環境へのコミットメントを維持します。 main での約束はメインに残すべきです。
レンダラーに対するコミットメントはレンダラーにも残る必要があります。メインプログラムからプリローダー、レンダラーにジャンプすることを約束しないでください。
＃＃＃ファイルシステム＃＃＃ビジネス ロジックのほとんどは依然としてメインまたはレンダラ側にあるはずですが、プリロード状態にあってはなりません。これは、プリロードがほぼ独占的にメディアとして存在するためです。プリロードは非常に小さくする必要があります。 OPの場合、
fsはマスター側で実装する必要があります。
2022年編集
私は、Electron の歴史 (Electron バージョンでセキュリティがどのように変化したか) と、新しいアプリケーションでプリロード ファイルを正しく使用するために Electron 開発者が実行できるその他のセキュリティ上の考慮事項について、より大きな記事 を公開しました。プログラム。
2020年編集別のユーザーが質問したので、以下に私の答えを説明させてください。
Electron でpreload.js
セキュリティの観点から、を使用する正しい方法は、アプリが必要とする可能性があるモジュールの周囲にホワイトリスト ラッパーを公開することです。preload.js
のrequireで公開されたもの、またはrequire呼び出しを介して取得されたものはすべて危険です (私のコメント## を参照してください) # 理由については詳しく説明します)。これは、アプリケーションがリモート コンテンツをロードする場合 (多くのアプリケーションがロードします) に特に当てはまります。 これを正しく行うには、以下で詳しく説明するように、BrowserWindow に新しいウィンドウを作成する必要があります。これらのオプションを設定すると、Electron アプリケーションは IPC (プロセス間通信) 経由で通信するようになり、2 つの環境が相互に分離されます。このようにアプリケーションを設定すると、クライアントによって改ざんされることなく、バックエンド内の require モジュールである可能性のあるものを検証できます。
secure-electron-template
このページ(私が作成者です) を使用して、Electron アプリケーションを構築するときに最初からこれらすべてのセキュリティのベスト プラクティスを組み込むことをお勧めします。 。には、preload.js を使用して安全なアプリケーションを作成するときに必要なアーキテクチャに関する優れた情報も含まれています。
main.js
リーリー
preload.jsリーリー
index.htmlリーリー